Talk is cheap

Element-ui中table合并单元格

在网站后台的开发中,table的行列合并是个很常见的功能。但是element官网的例子关于单元格的合并写的非常简单:

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

然而这里并没有之名这两个参数的意义:
经过程序调试发现: 每一行列渲染的时候,都会调用一下 span-method而不是指调用一次。也就是说,上面的返回值中rowspan 指的是当前的单元格要占几行, colspan指的是当前单元格要占几列。而且这里的合并是自上向下合并。

所以要实现某列的单元格合并,就要给当前列的每一行都设置一个rowspan数值,而且这个数值要有一定的规则,看下面的代码:

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

这段代码表示:合并第一列中的行,然后每一行合并多少个单元格要根据当前行的索引去spanArr这个数组中取。
假如这个表格总共有 5行,想合并前三行那么数组 spanArr=[3,0,0,1,1]
假如这个表格总共有 5行,想合并2-3行:那么 spanArr =[1,2,0,1,1]
明白了这个规则,剩下的就是根据自己的业务,来生成这个数组了

未经允许不得转载:CheapTalk » Element-ui中table合并单元格
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!