vue elementUI table表格列动态渲染的案例(小坑)
整个表格动态渲染的列 列数肯定要是同步的tableHeader 变量取到动态渲染的列数数组...<el-table-column:label="item" v-for="(item, index) in tableHeader" :key="index"><template slot-scope="scope">{{tableData[scope.$index].payTy
·
整个表格动态渲染的列
不管业务需求是怎么样的,表格列数肯定要是同步的,
tableHeader 变量取到动态渲染的列数数组(我用的table[0]项数据)
...
data() {
return {
tableData:[],
tableHeader:[],
}
}
...
//http请求到时候 渲染 表格的所有动态列都是同步的 所以就按照第一项来
this.tableHeader=this.tableData[0].demoArr;
...
...
<el-table
:data="tableData"
style="width: 100%">
<el-table-column :label="item" v-for="(item, index) in tableHeader" :key="index">
<template slot-scope="scope">
//scope.$index 行索引 index 列索引
{{tableData[scope.$index].arr[index]}}
</template>
</el-table-column>
</el-table>
...
scope.$index 同时也能取到表格行的index索引数值
如果需要Table自定义表头 用:render-header 的h函数去写就OK
https://blog.csdn.net/sinat_37255207/article/details/106696452
官方链接
https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
更多推荐
已为社区贡献10条内容
所有评论(0)