element表格动态合并多列

官方给的示例Element - The world's most popular Vue UI framework

，数据是写死的。但是实际情况中，我们往往需要进行动态合并多列。所以就需要我们自己进行处理（讲道理，这个功能，我觉得官方插件可以实现）

效果图：

html部分：重点在:span-method="objectSpanMethod"属性

js部分：

for循环中的data为表格要渲染的数据，合并的数据需要后端排好顺序（不然合并个啥。。）

第一步先处理渲染的数据，算出需要跨的列数：

        let self = this;
        // 该变量用于生成每一行该跨的列数
        self.rowAndColumn = [];
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            self.rowAndColumn.push(1);
            // pos用于定位是哪一行该开启跨列
            self.pos = 0;
          } else {
            //role_name为要合并的列名。每一行与上一行的role_name相同，则合并
            if (data[i].role_name === data[i - 1].role_name) {
              // 如果role_name相等就累加，并且push 0。pos用于定位是哪一行该开启跨列
              self.rowAndColumn[self.pos] += 1;
              self.rowAndColumn.push(0);
            } else {
              // 不相等push 1
              self.rowAndColumn.push(1);
              self.pos = i;
            }
          }

第二步：合并，看到这里，应该和官方的示例比较像了。

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let self = this;
      // 第三列需要合并
      if (columnIndex === 2) {
        if (self.rowAndColumn[rowIndex]) {
          let rowNum = self.rowAndColumn[rowIndex];
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0,
          };
        }
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },

代码注释应该写的比较详细了，自己copy,改下字段名，改下所在列数应该就可以合并了。

还不懂原理的话，可以多打印些信息进行分析。重点在于js代码第一步，处理数据那里。