element表格动态合并

690 阅读2分钟

首先看官方说明与关键代码示例,解读规则

看懂了个锤子!!什么重点都没说明





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];
  }
}


这样就完成了!!!
菜鸡又掉了一些头发,悲伤