elementui table 不显示表头_el-table 行列合并

#elementui#

element-ui

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

官方例子

官方例子

通过给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}也是为了删除多余列。

拓展

需求：如下图画出表格

行列合并拓展

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

代码：

/el-table-column>

行合并的和列子类似。