#elementui#

d6bedc27cef470f86aec6ab214249065.png

element-ui

Element-UI ( https://element.eleme.cn/#/zh-CN/component/table ) 是个很流行的 VUE 组件库,包含很多优秀的组件。今天说一下 table的行列合并

官方例子

e7b72aa8ea85bff2ee820784cdfe4122.png

官方例子

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

理解 arraySpanMethod 方法

      // 数组方式合并列,将行索引与2取余为0的行中的第1、 2列合并      arraySpanMethod({ row, column, rowIndex, columnIndex }) {        // 如果 行索引与2取余为零,        if (rowIndex % 2 === 0) {          // 如果 列索引是0(第一列),则设置合并          if (columnIndex === 0) {            return [1, 2]; // 合并一行中的两列,从当前列开始。即合并1行,且从第一列开始合并2列          } else if (columnIndex === 1) {             // 删除多余的列(原来的第2列)            // 因为 第一列合并为两列了,占用了两列的空间,原来的第2列会占用原来的第三列,依次类推            ,这一行就会多出一列,并且导致数据错行,显示结果不正确            return [0, 0];          }        }      },

注意: 行列合并后,记得使用[0,0] 删除多余列 ,使用对象方式合并时一样,{ rowspan: 0, colspan: 0}也是为了删除多余列。

拓展

需求:如下图画出表格

9c84dc1551916be38c9104644f2a16a2.png

行列合并拓展

分析: 上图中是合并第3列,合并后第3列将占据原来的第4、5列。所以要将第4、5列删掉

代码:

/el-table-column>

行合并的和列子类似。

Logo

前往低代码交流专区

更多推荐