vue+element实现表格跨行或跨列合并

前言

vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高,
有些产品经理或许会要求表格跨行或跨列合并,如果你正在想怎么实现,那就接着往下看
最新封装了一个表格合并和编辑插件:vue-split-table,戳一戳
效果图

element的2.x

(注意是2.X新加的方法)

1.span-method方法

可以实现合并行或列，

2.参数

方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

3.函数的返回数组

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置
          if (columnIndex === 0) {//判断条件可以设置成你想合并的列的起始位置
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
         }
    }
 },

4.返回对象

return [1,2]也可以返回一个对象

return {
rowspan: 2,//实际上就是给td加上rowspan属性
colspan: 1//实际上就是给td加上colspan属性
};