如何使用 El-table 合并数据，满足诉求类型和利用率的特殊合并要求？

el-table数据合并问题

此问题旨在解决el-table合并数据时的特殊需求。

需求说明：

• 当诉求类型相同且诉求利用率也相同，才能合并诉求利用率。
• 如果诉求利用率存在相同值，但诉求类型不同，则不合并。
• 细分类型和细分利用率的合并规则与此类似。

解决方法：

要在组件中实现此需求，需要对数据进行预处理，即数据清洗。

数据清洗步骤：

1. 标记首次出现的值为 ismerge: false，需要合并的行标记为 ismerge: true。
2. 记录appeal_type 和 detail_appeal_type 合并行的索引范围。
3. 处理 appeal_type_utilization_rate 和 detail_appeal_type_utilization_rate 时，按照步骤 2 记录的索引范围，将值求和记为sum。并将索引范围内每一行的该列的值设置为 sum，同时正确设置每行 ismerge 字段。

span-method 方法实现：

数据清洗完成后，设置 :span-method=objectspanmethod，并编写 objectspanmethod 方法，根据 ismerge 字段合并单元格。

function objectSpanMethod({ rowIndex }) {
  const currentData = this.tableData[rowIndex];
  if (!currentData.isMerge) {
    return {
      rowspan: 1,
      colspan: 1,
    };
  }
  return {
    rowspan: 0,
    colspan: 1,
  };
}

以上就是如何使用 El-table 合并数据，满足诉求类型和利用率的特殊合并要求？的详细内容，更多请关注www.sxiaw.com其它相关文章！