之前做了一个写死数据的,觉得还是Mock模拟数据接口更模拟真实一点,重新写了一版
效果如下图:
模拟数据
首先使用Mock模拟需要的数据,因为user页面内容比较多,后期也有增减用户的操作一类,都涉及到Mock方法拦截模拟,因此新建一个user.js用以集中编写,具体生成方式可以查看mockjs官网,大致如下:
import Mock from 'mockjs'
// 模拟数据
let UserList = []
const count = 10 // 模拟数量
for (let i = 0; i < count; i++) {
UserList.push(
Mock.mock({
id: Mock.Random.guid(),
username: Mock.Random.cname(),
gender: Mock.Random.integer(0, 1),
age: Mock.Random.integer(18, 50),
type: Mock.Random.integer(0, 1)
})
)
}
此处性别、用户类型两个数据使用了数字,因此在获取用户信息列表的时候将它们转化为相应字符串
getUserList(config) {
const pageList = UserList.map(user =>{
user.gender = parseInt(user.gender) == 1 ? "男" : "女"
user.type = parseInt(user.type) == 1 ? "管理员用户" : "普通用户"
return user
})
return {
code: 200,
list: pageList
}
},
然后在mock.js中引用拦截一下:
import user from './mockServeData/user'
Mock.mock('/user/getUserList', user.getUserList)
这样一个简易的数据接口就写好了
数据展示
接下来使用element-ui中的table组件展示数据,table在多个页面都会用到,因此稍微做一下封装:
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column
v-for="item in tableHead"
:key="item.prop"
:prop="item.prop"
:label="item.label"
min-width="180px"
>
</el-table-column>
<el-table-column
prop="edit"
label="编辑管理"
min-width="250">
<el-button type="primary" size="small">修改</el-button>
<el-button size="small">删除</el-button>
</el-table-column>
</el-table>
</template>
<script>
export default {
props: ["tableHead", "tableData"],
};
</script>
这里还没有编写修改和删除的功能,因为还需要使用表单相关功能,留到下一篇再写。先预留了位置
父组件传送数据如下:
tableHead: [
{
prop: "username",
label: "用户名",
},
{
prop: "gender",
label: "性别",
},
{
prop: "age",
label: "年龄",
},
{
prop: "type",
label: "用户类型",
},
],
tableData的数据需要通过模拟接口进行获取:
mounted(){
getUserList().then((res) => {
const { code, list } = res.data;
if (code === 200) {
this.tableData = list;
}
});
},
再绑定到子组件table中就能够显示了