问题背景
项目需求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、当前列号columnIndexobjectSpanMethod({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，不执行合并};}}}
点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏
