ivew-ui合并单元格详细讲解

在项目开发中，有时需要将表格的行或列进行合并，View UI （iView）从4.0.0版本开始，增加了 行/列合并  官网文档讲解不是很清楚 

1、基本

确认您使用的iview 版本为4.0.0以上

官方文档上介绍到  设置属性 span-method 可以指定合并行或列的算法。

下面借用一下官网的demo实例

 首先根据iview提供的span-method方法 为咱们的Table 绑定一个:span-method="handleSpan"方法

 

methods: {
               //row行 column列 rowIndex行下标 columnIndex列下标
            handleSpan ({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0 && columnIndex === 0) {
                  //如果是第一行 和第一列
                    return [1, 2];
                    //合并1行2列 
                    //返回的第一个参数是要合并的行 几行 第二个参数是列 几列
                } else if (rowIndex === 0 && columnIndex === 1) {
                    //这里需要注意需要把合并的用不到的 他的下标改成0 要不然会出现下标混乱的问题
                    return  [0, 0];
                }
                //这里 延续上边的思路
              if(rowIndex ===2 && columnIndex === 0){
                //第三行 第一列
                return[2,1];
                //合并两行 一列
              }else if(rowIndex === 3 && columnIndex === 0){
                	return[0,0]
              }
            }
        }

效果图

 简单练习一个 合并第2行 第2列和第3列

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