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

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

20180906232053.png

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

<el-table>
<el-table-column >
</el-table-column >
</el-table>

在.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=".." 这种方式风险未可知，但是亲测可以达到效果。

<el-table size="mini" stripe >

                <el-table-column label="名称" prop="name" type="selection"></el-table-column>

                <el-table-column label="名称" prop="name" align="left"  ></el-table-column>

                <el-table-column label="账号" prop="account" align="center" ></el-table-column>

                <el-table-column label="角色" prop="role" align="center"></el-table-column>
                
                <el-table-column label="添加时间" prop="date" align="center"></el-table-column>

                <el-table-column label="排序" prop="sort" align="center"></el-table-column>

                <el-table-column label="账户类型" prop="type" align="center"></el-table-column>

                <el-table-column label="状态" prop="state" align="center" ></el-table-column>

                <el-table-column label="操作" width="220" align="center" >
                  <template slot-scope="scope">
                      <el-button  size="mini" plain>查看</el-button>
                      <el-button  size="mini" plain >修改</el-button>
                      <el-button  @click="handleDelete" size="mini" plain type="danger">删除</el-button>
                  </template>
                </el-table-column>

              </el-table>

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

<el-table-column label="名称" >
<template slot-scope="scope">
{{scope.row.name}}
</template>
</el-table-column>