一.目标
实现下面这个页面,表格中的数据使用axois异步加载数据
![](https://i-blog.csdnimg.cn/direct/6b99d0a5113d4952a5fdd276239b7861.png)
二.实现步骤
首先在vue项目的views文件夹中新建一个tlias文件夹,用来存储该案例的相关组件。员工页面组件(EmpView.vue)和部门页面组件(DeptView.vue)分别在tlias文件夹中创建好。
![](https://i-blog.csdnimg.cn/direct/07eaa7ed4106478fba0177fbd03c5d10.png)
在App.vue中的<template>标签中引入<emp-view>标签,并在<script>标签中导入EmpView.vue组件。 components中加入EmpView组件。
<!-- 模板部分,由他生成HTML代码 相当于vue当中的视图部分 -->
<template>
<div> <!-- div是根标签,一个<template>标签中只能有一个根标签,也即只能有一个<template>标签 -->
<!-- <h1>{{ message }}</h1> -->
<!-- <element-view></element-view> -->
<emp-view></emp-view>
<!-- <router-view></router-view> -->
</div>
</template>
<!-- JS代码,定义vue当中的数据模型以及当中的方法 -->
<script>
/*
import ElementView from './views/element/ElementView.vue'
将ElementView.vue组件文件导入并重新命名为ElementView
注意:<template>标签里面没有定义标签,那么import的话会报错
*/
import EmpView from './views/tlias/EmpView.vue'
export default {
components: { EmpView }, // components里面也不能有<template>中未定义的标签的vue组件
data () {
return {
/* message:"Hello Vue" */
}
},
methods: {
}
}
</script>
<!-- 定义CSS样式 -->
<style>
</style>
1.页面基本布局
首先页面呈现出顶栏,左边栏,然后主区域的整体布局,因此要实现这种布局。我们在element组件中找到这一布局。
![](https://i-blog.csdnimg.cn/direct/6216b7cb81e94197998553006f43103d.png)
然后找到对应的代码复制到员工页面组件的<template>标签中。
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
浏览器页面结构如下:
在实现了基本布局后,发现这三部分并没有边框线,因此要在这三部分中加上边框线。
第一行代码改下:
<el-container style="height: 800px; border: 1px solid #eee">
下面在<el-header>标签中设置要展示的标题。
<el-header style="font-size: 40px; background-color: #6495ED;">tlias智能学习辅助系统</el-header>
header部分设计好后,接下来在<el-aside>标签中设置我们需要的样式 。首先在element组件库中寻找符合我们要求的样式。
![](https://i-blog.csdnimg.cn/direct/dc48ecd24a264ef9843a8a8db7395d94.png)
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
将代码删减成为我们所需要的样子。
<el-aside width="220px" style="background-color: rgb(238, 241, 246); 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-group>
<el-menu-item index="1-1">
<router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/emp">员工管理</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
header和aside设计好后,下面主要设计main部分。
2.页面组件实现
在main区域中首先分为以下几个部分:
最上面是表单,中间是表格,下面是分页栏。 因此需要这三部分的组件来实现。
首先是表单,表单采用的是行内表单。
![](https://i-blog.csdnimg.cn/direct/133688132c654cfcad019229b725dd56.png)
<el-form :inline="true" :model="searchEmp" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchEmp.name" placeholder="请输入员工姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.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="searchEmp.entryDate" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
<!-- 绑定在searchEmp对象中的entryDate属性中去,entryDate属性是一个数组,有开始日期和结束日期 -->
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
在表单中我们通过v-bind绑定了一个数据模型,是一个对象模型,命名为searchEmp,用来记住查询到的对象。所有的表单项都绑定在searchEmp这个对象当中。通过v-model实现searchEmp对象的name属性,gender属性和entryDate属性的双向绑定。
通过@click绑定一个事件onSubmit,当点击查询时会将数据提交,触发onSubmit方法。
methods: {
onsubmit:function() {
alert("开始查询数据~")
},
handleSizeChange:function(val) {
alert("当前页面条数为:" + val)
},
handleCurrentChange:function(val) {
alert("当前页为:" + val)
}
}
对象searchEmp要在vue对象中定义,其中的entryDate属性要定义一个日期选择器,包含开始日期和结束日期。entryDate属性是一个数组。
data () {
return {
searchEmp: {
name:"",
gender:"",
entryDate:[]
},
tableData:[]
}
}
接着是表格
<!-- 表格 -->
<el-table :data="tableData" :border="true"> <!-- tableData数据模型是一个数组,需要在Vue对象的数据模型中定义 -->
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column label="图像" width="140">
<!-- 图像要指定一个scope插槽 -->
<template slot-scope="scope">
<img :src="scope.row.image" width="50px"> <!-- 这个插槽展示图片,为src属性通过v-bind动态绑定一个值,即当前列中的每一行的image属性 -->
</template>
</el-table-column>
<el-table-column label="性别" width="140">
<!-- 性别要指定一个scope插槽,通过scope插槽可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据 -->
<template slot-scope="scope">
{{ scope.row.gender==1?'男':'女' }} <!-- 获取当前列中每一行的gender属性并判断是否==1,是为男,不是为女 -->
</template>
</el-table-column>
<el-table-column prop="job" label="职位" width="140"></el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="200"></el-table-column>
<el-table-column prop="updatedate" label="最后操作时间" width="200"></el-table-column>
<el-table-column label="操作" width="200">
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column> <!-- prop要与JSON数据中的属性名保持一致 -->
</el-table>
表格中通过v-bind绑定了一个属性tableData,该属性用于存储表格中的数据。表格中的数据仍是以数组形式进行存储的,因此在数据模型中进行声明。(见上面代码)
在表格的图像和性别区,会展示出value值而并非内容。为了解决这一问题,需要使用到插槽。
<el-table-column label="图像" width="140">
<!-- 图像要指定一个scope插槽 -->
<template slot-scope="scope">
<img :src="scope.row.image" width="50px"> <!-- 这个插槽展示图片,为src属性通过v-bind动态绑定一个值,即当前列中的每一行的image属性 -->
</template>
</el-table-column>
<el-table-column label="性别" width="140">
<!-- 性别要指定一个scope插槽,通过scope插槽可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据 -->
<template slot-scope="scope">
{{ scope.row.gender==1?'男':'女' }} <!-- 获取当前列中每一行的gender属性并判断是否==1,是为男,不是为女 -->
</template>
</el-table-column>
在图像中动态绑定src属性,使得图像这一列的每一行数据中的image属性动态绑定给src。
在性别中对这一列的每一行数据中的gender属性做判断,如果==1则性别为男,否则为女,使用三元运算符。
scope.row.image
scope.row.gender
3.分页组件实现
<el-pagination background layout="sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000">
<!-- :total="1000", 写全 v-bind:total="1000", ":"语法是 v-bind: 的简写,用于绑定一个动态的值到属性 -->
<!-- size-change pageSize 改变时会触发 回调参数:每页条数 -->
<!-- current-change currentPage 改变时会触发 回调参数:当前页 -->
<!-- @:v-on的简写 v-on为el-button标签绑定了一个事件click-->
</el-pagination>
methods: {
onsubmit:function() {
alert("开始查询数据~")
},
handleSizeChange:function(val) {
alert("当前页面条数为:" + val)
},
handleCurrentChange:function(val) {
alert("当前页为:" + val)
}
}
三.axios异步加载数据
![](https://i-blog.csdnimg.cn/direct/b0c6294efecf40d6be52b439f4416668.png)
使用axios异步加载数据,达到在页面中能够动态展示的效果。在mounted方法中当模型挂载完毕后,通过get方法拿到数据并将其中的data数组赋值给vue对象的tableData数组。
mounted () {
axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {
this.tableData=result.data.data
});
}
在<script>标签中引入axios
<script>
import axios from 'axios';
这样整个案例便制作完成。