vue elementUI table表格列动态渲染的案例

整个表格动态渲染的列

不管业务需求是怎么样的，表格列数肯定要是同步的，

tableHeader 变量取到动态渲染的列数数组（我用的table[0]项数据）

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

//http请求到时候 渲染  表格的所有动态列都是同步的 所以就按照第一项来
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索引数值

image.gif

如果需要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

image

​

image.gif