整個表格動態(tài)渲染的列
不管業(yè)務需求是怎么樣的,表格列數(shù)肯定要是同步的,
tableHeader 變量取到動態(tài)渲染的列數(shù)數(shù)組(我用的table[0]項數(shù)據(jù))
...
data() {
return {
tableData:[],
tableHeader:[],
}
}
...
//http請求到時候 渲染 表格的所有動態(tài)列都是同步的 所以就按照第一項來
this.tableHeader=this.tableData[0].demoArr;
...
image.gif
...
<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>
...
image.gif
scope.$index 同時也能取到表格行的index索引數(shù)值
image.gif
如果需要Table自定義表頭 用:render-header 的h函數(shù)去寫就OK
https://blog.csdn.net/sinat_37255207/article/details/106696452
官方鏈接
https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
image
?
image.gif