对于大多数前端开发者来说，vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架。而后台管理系统中，最常见的形式就是表格和表单，以便用来增删改查。
element-ui中table的使用
——当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。
:data="tableData" style="width: 100%">
prop="date" label="日期" width="180">
prop="name" label="姓名" width="180">
prop="address" label="地址">
循环渲染出element-ui中table表格内容
table表格分为两个部分，一部分值thead表头，还有是tbody主体部分，所以可以分别循环出来，看代码：
<el-table
:data="rightsDate" <！-- 表格里面的数据源 -->
border
stripe
height="713"
>
<el-table-column
v-for="info in rightHeader" :key="info.key"
: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" }
]
展示结果：
