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

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

具体解释参考地址:

https://blog.csdn.net/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)在请求到表格数据后进行调用或者表格数据更新后再次调用。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐