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

大家好，我们又见面了啊~本文《如何使用 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 合并数据，满足诉求类型和利用率的特殊合并要求？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！