element table自定义动态表头以及动态渲染下的插槽slot-scope

一、动态表头

废话不多说直接上源码

 <el-table
            :data="TableSalaryList"
            height="92%"
            border
            stripe
            style="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>
                            <span
                                v-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]

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

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