vue + element 动态表格

话不多说上代码:
html部分

<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">
  </el-table-column>
    </template>
</el-table>

表头数据格式

tableHead:[
    { column_name: "column_name",column_comment:"姓名"},
    { column_name: "column_age",column_comment:"年龄" },
    { column_name: "column_sex",column_comment:"性别"}
]

数据渲染(list数据)

tableData: [
    { column_age: '45',column_name: '广坤', column_sex: '男'},
    { column_age: '47',column_name: '刘能', column_sex: '男'},
    { column_age: '49,'column_name: '赵四', column_sex: '男'}
]
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容