vue elementUI table表格列動態渲染的案例

整個表格動態渲染的列

不管業務需求是怎么樣的，表格列數肯定要是同步的，

tableHeader 變量取到動態渲染的列數數組（我用的table[0]項數據）

...
data() {
    return {
     tableData:[],
     tableHeader:[],
}
}
...



//http請求到時候 渲染  表格的所有動態列都是同步的 所以就按照第一項來
this.tableHeader=this.tableData[0].demoArr;
...

 

...
<el-table-column  :label="item" v-for="(item, index) in tableHeader" :key="index"> 
                   <template slot-scope="scope">
                      {{tableData[scope.$index].payTypeAmountList[index] | changeNumber}}元
                       
 </el-table-column>
            
...

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

​