element-ui Table :span-method（实现多列行合并）

element-ui官网中的例子特别简单，但实际的原理也是那么如此。解析一下示例代码的意思：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {//哪一列可以合并（第一列）
          if (rowIndex % 2 === 0) {//满足合并行的条件（偶数行）
            return {
              rowspan: 2,//合并的行数
              colspan: 1 //合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

具体解释参考地址:

https://blog.youkuaiyun.com/qq_29468573/article/details/80742646

有了前面大佬的讲解之后，大佬的例子只有一行需要合并，如果多行肯定需要很多组spanArr和pos对应存储对应行的合并信息。这样在data里面疯狂定义这样的数据会十分的不优雅，所以我简化了定义和数据的操作如下：

// 表格数据
tableData: [
                {dmsPostName: '经理', dmsRoleName: '二级人事', hrPostName: 'KA专员'},
                {dmsPostName: '经理', dmsRoleName: '二级业务', hrPostName: 'v顾问'},
                {dmsPostName: '政企专员', dmsRoleName: '二级业务', hrPostName: '二级业务'},
                {dmsPostName: 'v主管', dmsRoleName: 'v主管', hrPostName: '培训专员'},
            ], 
//data里面需要合并的项以及对应的spanArr和pos
mergerItems: [
                {   columnIndex:1,
                    spanArr: [],
                    pos: 0,
                    prop: 'dmsPostName'
                },
                {   columnIndex:2,
                    spanArr: [],
                    pos: 0,
                    prop: 'dmsRoleName'
                }]

上面是数据的定义下面是需要用到的方法：

cellMerge({row, column, rowIndex, columnIndex}) {//表格合并的方法
                if (columnIndex === 1 || columnIndex === 2) {//这里判断第几列需要合并
                    let item = this.mergerItems.find(item => item.columnIndex === columnIndex)
                    const _row = item.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    }
                }
            },
getSpanArr(data, array) {//循环数据处理
                for (let n = 0; n < array.length; n++) {
                    array[n].spanArr = []//数据清空(重新调此方法的时候需要清空上一次的数据)
                    for (let i = 0; i < data.length; i++) {
                        if (i === 0) {
                            array[n].spanArr.push(1);
                            array[n].pos = 0;
                        } else {
                            // 判断当前元素与上一个元素是否相同
                            if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
                                array[n].spanArr[array[n].pos] += 1;
                                array[n].spanArr.push(0);
                            } else {
                                array[n].spanArr.push(1);
                                array[n].pos = i;
                            }
                        }
                    }
                }
			},

上面数据需要注意的是mergerItems里面columnIndex 一定要与你需要合并的列对应上：例如我这个就是第一列以及第二列合并（因为columnIndex 就是一个标记，可以根据这个字段找到对应的列下面所记录需要合并行的信息）。mergerItems里面prop对应的就是tableData里面需要合并的字段对应上（这里的tableData我写死了，具体tableData的数据还是得看后台怎么定义的），例如我的就是dmsPostName和dmsRoleName其实合并的就是“经理”和“二级业务”字段效果如下图

调用：this.getSpanArr(this.tableData, this.mergerItems)在请求到表格数据后进行调用或者表格数据更新后再次调用。