element-plus中的el-table如何动态合并行（复制粘贴即可使用亲测有效！）

news2024/11/16 13:51:53

demo场景：
一个 table，由5列组成，其 prop 分别为’resource_name’, ‘scene_name’, ‘type’, ‘content’, ‘desc’，渲染 table 的数据来源于接口。现在需要将 prop=desc的这一列，按照resource_name 相等时进行合并。
需求拆分：
阅读 element-plus的官方文档，可以知道对于 el-table有一个方法用来合并行/列
在这里插入图片描述
也就是说，我们需要通过构建一个函数，能够精准的计算出，我们需要合并的resource_name相同的数据有多少行，将让rowspan=这个数值，colspan=1，既能满足。但构建函数需要注意的是，这个函数是按照行数去遍历的，比如前 5 行 resource_name相等，那我们在遍历到第一行的时候，就需要返回rowspan=5，colspan=1，接下来函数在此调用，返回的结果会影响第二行，而第二行已经被合并到第一行里了，这时返回rowspan=0，colspan=0即可，第三、四、五行都是一样的返回rowspan=0，colspan=0。
计算函数如下：

   const compareSingleAttrReturnColSpan=(row, compareAttr, index, tableData)=> {
    let count = 0;
    let start = index;
    let multCompare = true;
    
    while (start < tableData.length && multCompare) {
      start++;
      count++;
      multCompare = row[compareAttr] === tableData[start]?.[compareAttr];//依旧符合相等条件
    }
    start--;//退出循环后的 新起始行 index
    
    if (start < tableData.length) {
      tableData[index][`${compareAttr}_count`] = count;//将合并的行数存储在行数据中的一个特定属性中
    }

    if (index > 0 && count + 1 === tableData[index - 1][`${compareAttr}_count`]) {
      return [0, 0];//不需要合并
    }
    return [count, 1];
  }

然后在合并函数里，因为 :span-method绑定的方法自身并不传入 table 的所有数据，作为参数之一，所以需要采用闭包的形式，将 table

<ElTable :span-method="(value) => rowSpanRulesHandler(value, item.adjustment_log)"
                :data="item.adjustment_log" >

这样传参，就可以确保方法的默认参数和 tableData一起作为参数。

const columns = ['resource_name', 'scene_name', 'type', 'content', 'desc'];
const rowSpanRulesHandler = ({ row, column, rowIndex, columnIndex }, data) => {
  if (columns[columnIndex] === 'desc') {
    const r = CombineColumns.compareAttrReturnColSpan(row, 'resource_code', rowIndex, data);
    return r;
  }
};