首页 >
文章列表 > 如何使用 El-table 合并数据,满足诉求类型和利用率的特殊合并要求?
如何使用 El-table 合并数据,满足诉求类型和利用率的特殊合并要求?
246
2024-12-11

el-table数据合并问题
此问题旨在解决el-table合并数据时的特殊需求。
需求说明:
- 当诉求类型相同且诉求利用率也相同,才能合并诉求利用率。
- 如果诉求利用率存在相同值,但诉求类型不同,则不合并。
- 细分类型和细分利用率的合并规则与此类似。
解决方法:
要在组件中实现此需求,需要对数据进行预处理,即数据清洗。
数据清洗步骤:
- 标记首次出现的值为 ismerge: false,需要合并的行标记为 ismerge: true。
- 记录appeal_type 和 detail_appeal_type 合并行的索引范围。
- 处理 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,
};
}