elementui Table组件单元格合并功能剖析

说在前面

近期项目开发过程中用到了单元格合并的功能,在研究官网的介绍时其实不是很了解,好在给的有demo可以参考,如果需求是直接合并某一列,可能就不会有后面的故事了,恰好需求有点变化,如图所示:比如要求合并第一列除第一行的内容。

在这里插入图片描述

温故知新

下面带各位看官理解一下官方提供的demo,假设我们使用tableData长度为5,全篇设定,后面不再赘述。

<el-table></el-table>
<script>
	export default {
        data() {
            tableData: [..], // 假设tableData的长度是5,
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                  if (rowIndex % 2 === 0) {
                    return {
                      rowspan: 2,
                      colspan: 1
                    };
                  } else {
                    return {
                      rowspan: 0,
                      colspan: 0
                    };
                  }
                }
            }
        }
    }
</script>

上述代码最终展示效果如图:

在这里插入图片描述

rowIndexcolunmIndex分别代指当前的行和列,上述代码控制的合并第一列的内容(columnIndex === 0)

rowspancolspan分别代指需要合并的行和列,以上述代码为例,return {rowspan:2,colspan:1},就是合并纵向的2个单元格,return {rowspan:0,colspan:0},就是删掉单元格(如果仅仅是删掉,而没有合并的动作,就会出现数据行前移的现象,文章下面会说到)。

然后,我们判断rowIndex % 2 === 0,余数(%)大家应该不陌生,0%2==0,2%2==0,4%2==0

第一行与第二行合并,值取第一行,第三行与第四行合并,值取第三行,以此类推…

羊肠九转

当我拿到需求之后,我最开始是这样想的,固定第一行不动,所以返回return {rowspan:1,colspan:1},然后将取余的逻辑换成了行数大于0的逻辑,别问我为什么写出这么蠢的逻辑,过程调试而已。下面我们需要做的是根据表现推算出为什么他会如此,从而深刻理解每一个变量的含义。

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        }; 
    } else if (rowIndex > 0) {
        return {
            rowspan: 2,
            colspan: 1,
        };
    } else { // rowIndex始终>=0,这部分不会被执行
        return {
            rowspan: 0,
            colspan: 0,
        };
    }
}

在这里插入图片描述

大家注意到,两个ID被“挤”到后面去了,而且因为五行数据只有4个值,还自动把第二列3-4行的数据合并了,最开始我还纳闷,我只操作了columnIndex===0的情况,也是后来才意识到。

继续改进逻辑:

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        }
    } else if (rowIndex % 4 === 0) {
        return {
            rowspan: 4,
            colspan: 1,
        };
    } else {
        return {
            rowspan: 0,
            colspan: 0,
        };
    }
}

在这里插入图片描述

这里大家注意到,2-4行都前进了一格,这肯定是return{rowspan:0,colspan:0}起了作用,而且我们也可以推断出来,第五列合并的原因-----数据前移,“挤”出来一块空地,由于只有第五行有数据,所以再次合并了单元格。

我们离真相越来越近了。

拨得云开

大家可以考虑下,怎么做才能实现文章开头说的效果呢?不急着往下看,给你5分钟…

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        };
    } else if ((rowIndex-1) % 4 === 0) {
        return {
            rowspan: 4,
            colspan: 1,
        }
    } else {
        return {
            rowspan: 0,
            colspan: 0,
        }
    }
}

效果图参见文章开头。

需求可能会变,但当理解了过程,就可以轻松应对变化

说到最后

学好数理化,走遍天下都不怕。

以上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值