首先看官方说明与关键代码示例,解读规则
看懂了个锤子!!什么重点都没说明



element表格合并规则
遍历每个单元格,遇到需要合并的单元格的开头时,返回需要合并的行数与列数
注意:被合并的单元格需要返回[0, 0],或者{rowspan: 0, colspan: 0},否则会错位
例如:第一列的1至5行单元格需要合并
则在第一列第一行单元格返回[5, 1],或者{rowspan: 5, colspan: 1}
第一列第二至五行单元格返回[0, 0],或者{rowspan: 0, colspan: 0}
老娘试了好久才知道要返回[0,0]!!错位错老半天对比了好一阵子示例才发现的
都给我记得返回0和0!!

动态合并示例
需求:

后端给的数据:
数组项是对象,大致就是
[{
结算部门,
项目数组: [
{
项目名称,
项目编码,
总投入,
承接数组: [
{
承接部门,
投入时间
}
]
}
]
}]给表格使用需要每一条都是一个数组项,
经过一顿遍历操作之后变成
[{
结算部门,
项目名称,
项目编码,
总投入,
承接部门,
投入时间
}]数据改造的同时,顺便计算出一个合并信息数组,供表格合并方法使用
因为我的需求只需要单列合并,所以给合并的列都算了一个合并信息数组
一个列的合并信息数据大概是这样
[
{
rowIndex: null, // 开始合并的行index
rowspan: null // 需要合并的行数
}
]然后根据这个合并信息去处理合并
这里我使用的是返回数组形式
前面说了,
遇到需要合并的单元格的开头时,返回需要合并的行数与列数;
被合并的单元格需要返回[0, 0],或者{rowspan: 0, colspan: 0},否则会错位。
规则:
当前单元格的列是需要合并的列时:
若在该列合并信息数组中匹配到,则返回匹配到的rowspan,也就是合并行数;
否则返回[0, 0]。
(这里我返回的colspan都是1,因为我的需求只需要单列合并,不需要跨列)
直接上代码
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const item = this.col1Arr.find(item => rowIndex === item.rowIndex);
if (item) return [item.rowspan, 1];
return [0, 0];
}
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
const item = this.col2Arr.find(item => rowIndex === item.rowIndex);
if (item) return [item.rowspan, 1];
return [0, 0];
}
}这样就完成了!!!
菜鸡又掉了一些头发,悲伤
