1先写点前言吧
这个算是千年老代码，我都是参考这个代码来写自己的结构，要注意这个算是vue的数据驱动吧，因为它是按照数据来渲染你的结构的。
之前写react和原生的东西就比较爱用js来操作东西，结构被vue大佬鄙视，写VUE的时候就尽量不去操作dom。不过这样整的我都忘记写react了，尴尬。
这点其实我在搞react的时候就知道一个概念，就是react是一个写js的东西，他不会给我们封装一些方法，基本就是原生的js来操作页面，而vue就比较现成，很多东西都是有vue自己封装的。比如v-for v-if v-show之类的，用他们结合数组或者json来控制渲染你的组件，所以这个算是数据驱动吧。前者比较灵活，你自己爱咋地咋地；后者就被限制住了，后者写东西都是尽量往vue自己的东西上面靠，不会去写原生的东西。思路差别。
el-table这里我推荐一个不错的博客，我的项目里用的比较简单，不需要放按钮。他这里面有template的结构，方便放按钮图标之类的东西，连接如下https://www.cnblogs.com/layaling/p/10962858.html
2实际代码
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。
3代码
这里我补充解释一些代码思路，数据部分是两组，一组用来放数据，一组用来放你的表名和表的字段，用后者来生成表结构，用后者的字段名来取数据，实现上数据，这里容易迷糊，但改起来用还是很方便。
<el-table
:data="rightsDate" <！-- 表格里面的数据源 -->
border
stripe
height="713"
>
<el-table-column
v-for="info in rightHeader" :key="info.key" <!-- 设置表头数据源，并循环渲染出来，property对应列内容的字段名，详情见下面的数据源格式 -->
:property="info.key"
:label="info.label"
>
<template slot-scope="scope">
{{scope.row[scope.column.property]}} <!-- 渲染对应表格里面的内容 -->
</template>
</el-table-column>
<el-table-column label="启用状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.ifUse"
:active-color="ACT_COLOR"
:inactive-color="INACT_COLOR">
</el-switch>
</template>
</el-table-column> </el-table>
模拟数据源展示：
rightHeader: [
{
label: '编码',
key: 'code'
},
{
label: '姓名',
key: 'name'
},
{
label: '权限描述',
key: 'description'
}
],
rightsDate:[{
"id":221,
"code": "01",
"name": "西药开立权限",
"description": "医生对西药处方权限",
"ifUse":"0"
}, {
"id":222,
"code": "02",
"name": "草药开立权限",
"description": "医生对草药处方权限",
"ifUse":"0"
}, {
"id":223,
"code": "03",
"name": "成药开立权限",
"description": "医生对成药处方权限",
"ifUse":"0"
}, {
"id":224,
"code": "04",
"name": "麻醉开立权限",
"description": "医生对麻醉处方权限",
"ifUse":"0"
},
{
"id":225,
"code": "05",
"name": "精一开立权限",
"description": "医生对精一处方权限",
"ifUse":"0"
}
]
