一、动态表头

废话不多说直接上源码

<el-table:data="TableSalaryList"height="92%"borderstripestyle="width: 100%"@row-dblclick="touchSalary":header-cell-style="{ 'text-align': 'center' }"><el-table-column type="selection" width="55"> </el-table-column><el-table-column v-for="(list,index) in TableSalaryHeadList":key="index" :label="list.label":property="list.property":width="list.style"></el-table-column></el-table>

需要一个table的整体数据数组TableSalaryList，还要一个表头的数据数组TableSalaryHeadList

重要的是

<el-table-column v-for="(list,index) in TableSalaryHeadList" :key="index" :label="list.label" :property="list.property" :width="list.style">

将表头数据循环，指定label显示的值，以及property当前列展示的属性值

我的表头数据是这样的

这里的lable是需要展示的表头值，property值是和数组数据TableSalaryList的键名一样用来展示当前列的值，style可以指定当前列的宽度。

效果图

二、动态渲染下的插槽slot-scope

先放一段源码

<template slot-scope="scope"><span v-if="scope.column.label === '人员类型'">{{scope.row.empType === "01" ? "在职" : "离退"}}</span><spanv-else-if="scope.column.label === '状态'">{{scope.row.state === "0" ? "未发送" : scope.row.state === "1" ? "处理中" : scope.row.state === "2" ? "支付成功" : scope.row.state === "3" ? "支付失败" : "作废"}}</span><span v-else>{{scope.row[scope.column.property]}}</span></template>

scope.row

可以单独{{scope.row}}看下，一下子就会明白，可以根据里面的属性进行相应的判断操作，

scope.row[scope.column.property]

这个就会显示你表里面循环的值

自己学习的笔记，如果写错了，欢迎大佬指点。