element table组件合并行或列

在使用element table这个组件的时候,发现有些数据需要合并行,有些数据又要合并列,table自带了span-method这个方法,可以根据需要进行单元格的合并。

getSpanArr(data) {
            this.spanArr = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断这一条和上一条id是否相同
                    if (data[i].id === data[i - 1].id) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }else if(columnIndex === 1){
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }else if(columnIndex === 2){
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }else if(columnIndex === 3){
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },

getSpanArr这个函数的作用是整合需要合并的行,假设data是需要处理的数据列表,对这个列表进行循环,如果是第一条先在spanArr数组加1,并且把这个位置pos置0,如果之后的数据和上一条数据的id相同,那就在同样的pos位置加1,同时push一个0,代表要合并的行的数量,如果不相同,就往spanArr中新加入一个1,同时记住位置。
这个方法需要数据已经是按id排序过的数组,即相同id的数据相邻。

objectSpanMethod是我写的span-method方法,因为我需要的是合并相同id的行的前4列单元格,首先判断columnIndex(列号)是多少,然后取出spanArr当前行号对应的数字,如果当前行号对应的数字是>0代表当前行存在且不需要合并,然后return,return既可以是一个对象,也可以是一个数组,第一个元素代表rowspan,第二个元素代表colspan。
这样就可以合并行的单元格。效果类似
在这里插入图片描述
但是如果要合并同一行中左右的单元格,达到如下的效果
在这里插入图片描述
这样需要合并同行的列,只需要控制一下想要合并的行就行

if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }

在行号对2取余数未0的时候,如果列号是0,就合并第0列和第1列,同时第1列要返回[0,0],此处必须要返回第一列的合并数组,否则table表就会多一列,因为第0列占据的colspan是2,此外其他列占据为1,会使表格显示不正常。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
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 7 个月前
Logo

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

更多推荐