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

原创已于 2022-08-04 16:28:27 修改 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui

于 2022-04-07 20:13:59 首次发布

前端学习同时被 2 个专栏收录

3 篇文章

订阅专栏

element

2 篇文章

订阅专栏

本文介绍了如何在Vue.js中实现动态表格渲染，包括通过`v-for`指令动态生成表头，以及使用`slot-scope`进行复杂内容的条件渲染。示例代码展示了如何设置表格样式、绑定数据，并根据表头数据展示对应的列属性。同时，详细解释了`scope.row`和`scope.column.property`在表格渲染中的作用，帮助理解动态表格数据绑定和插槽的使用技巧。

一、动态表头

废话不多说直接上源码

 <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>