4.4.3.6 异步数加载
4.4.3.6.1 异步加载数据

对于案例,我们只差最后数据了,而数据mock地址已经提供:http://yapi.smart-xwork.cn/mock/169327/emp/list

我们最后要做的就是异步加载数据,所以我们需要使用axios发送ajax请求

vue项目中,对于axios使用分为如下2步:

  1. 安装axios: npm install axios

  2. 需要使用axios时,导入axios: import axiosaxios

接下来我们先来到项目执行终端然后输入命令安装axios,具体操作下图所示

然后重启项目,来到我们的EmpView.vue组件页面,通过import命令导入axios代码如下

import axios  'axios';

那么我们什么时候发送axios请求呢?页面加载完成自动加载,所以可以使用之前的mounted子函数,并且我们需要将得到的员工数据要展示表格,所以数据需要赋值数据模型tableData,所以我们编写如下代码

 mounted(){
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
        .then(resp=>{
            this.tableData=resp.data.data; //响应数据赋值数据模型
        });
    }

此时浏览器打开呈现如下效果

但是很明显,性别和图片的内容显示正确,所以我们需要修复

4.4.3.6.2 性别内容展示修复

首先我们来到ElementUI提供的表格组件找到如下示例

我们仔细对比效果功能实现代码发现其中涉及2个非常重要的点:

所以接下来,我们可以通过上述标签自定义列的内容即可修改性别列的内容代码如下

 <el-table-column prop="gender"    label="性别" width="140">
     <template slot-scope="scope">
         {{scope.row.gender==1?"男":"女"}}
     </template>
 </el-table-column>

此时打开浏览器效果下图所示:性别一列的值修复成功

4.4.3.6.3 图片内容展示修复

图片内容的修复上述一致,需要借助<template>标签自定义列的内容,需要需要展示图片直接借助<img>标签即可,并且需要设置图片宽度高度,所以直接修改图片列的代码如下

<el-table-column prop="image"     label="图像" width="180">
    <template slot-scope="scope">
        <img :src="scope.row.image" width="100px" height="70px">
    </template>
</el-table-column>

此时回到浏览器效果下图所示:图片展示修复成功

此时整个案例完整,其完整代码如下

<template>
    <div>
        <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px"  style="border: 1px solid #eee">
                     <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                          
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                          
                     
                        </el-submenu>
                     </el-menu>
                </el-aside>
                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                          <el-form-item label="入职日期">
                             <el-date-picker
                                v-model="searchForm.entrydate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 表格 -->
                    <el-table :data="tableData">
                        <el-table-column prop="name"      label="姓名" width="180"></el-table-column>
                        <el-table-column prop="image"     label="图像" width="180">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="100px" height="70px">
                            </template>
                        </el-table-column>
                        <el-table-column prop="gender"    label="性别" width="140">
                            <template slot-scope="scope">
                                {{scope.row.gender==1?"男":"女"}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job"       label="职位" width="140"></el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
                        <el-table-column label="操作" >
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
​
                    <!-- Pagination分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="sizes,prev, pager, next,jumper,total"
                        :total="1000">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
​
<script>
import axios  'axios'
export default {
     data() {
      return {
        tableData: [
           
        ],
        searchForm:{
            name:'',
            gender:'',
            entrydate:[]
        }
      }
    },
    methods:{
        onSubmit:function(){
            console.log(this.searchForm);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    mounted(){
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
        .then(resp=>{
            this.tableData=resp.data.data;
        });
    }
}
</script>
​
<style>
​
</style>

原文地址:https://blog.csdn.net/qq_69748833/article/details/134771967

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_49214.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注