element-ui table表格动态v-for渲染表格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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: '女'
}],
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)