el-table 怎么合并相同单元格

问题背景

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

问题描述

el-table

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

解决问题

首先需要在

el-table

标签上绑定

:span-method="objectSpanMethod"

<el-table:data="tableData":span-method="objectSpanMethod"><el-table-columnprop="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，不执行合并};}}}

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