当前位置：首页 > news >正文

Vue2 +Element UI 表格行合并

news 2025/7/6 4:39:37

如果相邻数据是一致的，则单元格的行合并,指定需要合并的列，下面我是指定合并了分类和类型这两列。
先看效果
在这里插入图片描述 Element UI为我们的<el-table>提供了一个属性span-method：合并行或列的计算方法
下面是一个示例:

html部分 - 主要是在表上指定span-method方法

<template><div><el-table :span-method="objectSpanMethod" :data="tableData" row-key="id" border><el-table-column label="序号" width="55" align="center"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="name" label="分类" align="center"></el-table-column><el-table-column prop="num" label="数量" align="center"></el-table-column><el-table-column prop="type" label="类型" align="center"></el-table-column></el-table></div>
</template>

data部分 - 表格数据

data() {return {tableData: [{name: '咖啡',num: '2',type: '饮料'},{name: '咖啡',num: '5',type: '饮料',}, {name: '巧克力',num: '2',type: '高热量食品',}, {name: '巧克力',num: '2',type: '高热量食品',}, {name: '巧克力',num: '2',type: '高热量食品',}, {name: '牛奶',num: '2',type: '蛋白质',}]}}

methods部分 - span-method方法，行合并的逻辑

methods: {// table合并列objectSpanMethod({row, column, rowIndex, columnIndex}) {let data = this.tableData; // 拿到当前table中的数据let cellValue = row[column.property]; // 获取当前位置的值let sortArr = ['name', 'type']; // 需要合并的字段（用于合并行的属性）if (cellValue && sortArr.includes(column.property)) {let prevRow = data[rowIndex - 1]; // 获取上一行的数据let nextRow = data[rowIndex + 1]; // 获取下一行的数据if (prevRow && prevRow[column.property] === cellValue) { // 当有上一行的数据，并且与当前值相等时return {rowspan: 0, colspan: 0}; // 返回一个对象，表示不需要合并单元格} else {let countRowspan = 1;while (nextRow && nextRow[column.property] === cellValue) { // 当有下一行的数据并且与当前值相等时，获取新的下一行数据nextRow = data[++countRowspan + rowIndex];}if (countRowspan > 1) {return {rowspan: countRowspan, colspan: 1}; // 返回一个对象，表示需要合并行单元格}}}},}