el-table动态合并行

AiGarry

已于 2022-08-18 22:59:24 修改

阅读量756

点赞数

文章标签： vue.js elementui javascript

于 2022-08-14 16:36:41 首次发布

本文链接：https://blog.csdn.net/AiGarry/article/details/126264301

版权

span-method 合并行或列的计算方法

row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className

table表格合并列，表头还是正常的书写，只是表格中的内容根据第一列相同的再进行合并，使得表格数据内容看起来更加清晰

第一步：HTML页面编写

<el-table
    :data="tableList"
    row-key="id" 
    :span-method="objectSpanMethod" 
    :row-class-name="tableRowClassName"
>
    <el-table-column prop="class" label="年级" show-overflow-tooltip width="200" />
    <el-table-column prop="name" label="姓名" show-overflow-tooltip width="200" />
    <el-table-column prop="age" label="年龄" show-overflow-tooltip width="200" />
    <el-table-column prop="tel" label="电话" show-overflow-tooltip width="200" />
    <el-table-column pro