vue element-ui动态生成table表头和数据
element-ui动态生成表头和数据;应用场景:由于业务需要根据后台返回的数据进行动态的生成表格(表头+数据);1、template<el-table style="width: 100%" border :data="tableData"><template v-for="(item,index) in tableHead">&...
·
element-ui动态生成表头和数据;
应用场景:由于业务需要根据后台返回的数据进行动态的生成表格(表头+数据);
1、template
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
</template>
</el-table>
2、script
//javascript
// 表头数据
tableHead:[
{
column_name: "column_name",column_comment:"姓名"
},
{
column_name: "column_age",column_comment:"年龄"
},
{
column_name: "column_sex",column_comment:"性别"
}
],
// 表格数据
tableData: [{
column_age: '3',
column_name: '鞠婧祎',
column_sex: '女'
},
{
column_age: '25',
column_name: '魏大勋',
column_sex: '男'
},
{
column_age: '18',
column_name: '关晓彤',
column_sex: '女'
}],
prop 表格字段,label表格字段名 , tableHead表头数据(这里很重要哈)
最后就可以出现那个效果了哈~ 效果图如下:
直接复制就可以用,要是有问题可以直接私信哈
更多推荐
已为社区贡献3条内容
所有评论(0)