问题背景

项目需求table表格中，相同的类型合并成一个单元格展示。

问题描述

el-table并没有相关的语法直接合并，需要我们自己传入一个方法返回一个数组格式，来确定要合并行列。

解决问题

首先需要在 el-table 标签上绑定:span-method="objectSpanMethod"

<el-table :data="tableData" :span-method="objectSpanMethod" ><el-table-column prop="projectName" label="订单类型" />  
</el-table>

再去methods中定义 objectSpanMethod 方法，data中定义一个rowSpanArr参数

// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
handleTableData(tableData){let rowSpanArr = [], position = 0;for (let [index, item] of tableData.entries()) {if (index == 0) {rowSpanArr.push(1);position = 0;} else {if (item.projectName == tableData[index - 1].projectName) {rowSpanArr[position] += 1; //项目名称相同，合并到同一个数组中rowSpanArr.push(0);} else {rowSpanArr.push(1);position = index;}}}this.rowSpanArr = rowSpanArr
}
// 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){if (columnIndex === 0) {const rowSpan = this.rowSpanArr[rowIndex];return {rowspan: rowSpan, //行colspan: 1 //列};}
}

扩展

objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { // 判断是不是第一列，只有第一列才执行合并if (rowIndex % 2 === 0) { // 判断能不能被2整除return {rowspan: 2, // 从当前单元格开始，执行合并2行colspan: 1, // 从当前单元格开始，执行合并1列};} else {return { // 第一列的其他元素不执行合并rowspan: 0, // 为0，不执行合并colspan: 0  // 为0，不执行合并};}}}

---

点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏