vue学习笔记-模拟数据应用到表格

目标：实现将模拟的数据显示在表格内
准备：模拟数据的.json文件一份
具体实现效果：

20180906232053.png

分析：
首先表格由表头和每行的内容来组成。首先采用以下dom结构勾出大样子：

在.json文件中我们写好了基本的数据，代码片段：

"data": {
"all": [
{
"id": "610000200401115715", //虽然可能用不到，但是还是建议有ID
"name": "算即断并济以",
"account": "yY6",
"role": "超级管理员",
"date": "1975-04-22 04:45:09",
"sort": 9,
"type": "平台账号",
"state": "未注册"
},
........
]
}
以上数据也可以直接用mock.js生成，或者干脆easymock生成，不必再手动写好多行,具体实现方式后续更新。

引入，这里为了方便直接把json文件直接放在同一级，具体操作遵循文件存放规则，按照路径引入即可：

import response from './index.json'

mounted生命周期钩子，加载完成后模拟数据赋给userList

mounted () {
this.userList = response.data
},

以上步骤只是做好了表格内数据的准备，接下来准备表头，因为表头内容较少，就不再建文件存放了，直接return

data () {
return {
tabHeader: [
{
title: '名称',
dataIndex: 'name',
key: 'name'
},
{
title: '账号',
dataIndex: 'account',
key: 'account'
},
...........
}
}

到这里 准备工作就做完了,以下步骤直接实现表头和表格内数据循环出来

第一种： label=".." prop=".." 这种方式风险未可知，但是亲测可以达到效果。

第二种： {{scope.row.*}} 这种方法代码量比较大，但是合乎规则。