element-ui中table的使用
当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。
相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多数据或者参数不确定的情况下,这种枚举的方式就不太适合了
常规用法
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
循环渲染出element-ui中table表格内容
table表格分为两个部分,一部分值thead表头,还有是tbody主体部分,所以可以分别循环出来
<el-table
:data="rightsData" <!--表格数据源-->
border
stripe
height="590"
>
<!--设置表头数据源,并循环渲染出来,property对应列内容的字段名-->
<el-table-column
v-for="item in rightHeader"
:key="item.key"
:property="item.key"
:label="item.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.status"
: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'
}
],
rightsData:[{
"id":1,
"code": "01",
"name": "西药开立权限",
"description": "是的噶事大概的",
"status":"0"
}, {
"id":2,
"code": "02",
"name": "三顿饭IU我us噢ID",
"description": "sadgas都发生",
"status":"0"
}, {
"id":3,
"code": "03",
"name": "阿斯顿发斯蒂芬",
"description": "sadgas搭嘎是的",
"status":"0"
}, {
"id":4,
"code": "04",
"name": "按时打发士大夫是",
"description": "阿萨德噶啥大概的",
"status":"0"
},
{
"id":5,
"code": "05",
"name": "阿斯顿发送到VS地方",
"description": "阿萨德刚傻大个",
"status":"0"
}
]