vue element table 不同列的相同行合并

官方给出的案列只进行了第一列的合并，很多时候不满足需求，自己搞了一下
思路就是循环一下: 官方的 rowSpanFilter 方法
rowtext:shi 每列的key
每次返回的this.spanArr 是一个数组 类似 [1， 1， 2， 0， 0] ：表示第三行至第五行值相同 需要合并

    rowSpanFilter(val, rowtext) {
      let _this = this;
      _this.spanArr = [];
      let tabData = val.data;
      let contactDot = 0;
      if (tabData.length == 0 || !tabData) return;
      tabData.forEach((item, index) => {
        if (index === 0) {
          _this.spanArr.push(1);
        } else {
          if (item[rowtext] === tabData[index - 1][rowtext]) {
            _this.spanArr[contactDot] += 1;
            _this.spanArr.push(0);
          } else {
            contactDot = index;
            _this.spanArr.push(1);
          }
        }
      });
      this.comSpan.push(this.spanArr);
    },

接下来 ：给el-table 绑定 :span-method=“objectSpanMethod”，进行合并处理

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      this.rabishs[0] = { row, column };
      let len = this.curSchemeData.columnNum;
      for (let i = 0; i < len; i++) {
        if (columnIndex == i) {
          if (this.comSpan[i][rowIndex]) {
            return {
              rowspan: this.comSpan[i][rowIndex],
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },

这样后发现并不完善，表头还需要处理，给 el-table 绑定： :header-cell-style=“discountHeaderStyle1”

    discountHeaderStyle1({ row, column, rowIndex, columnIndex }) {
      this.rabishs[0] = { row, column };
      if (!this.curSchemeData.columnNum) return;
      let num = this.curSchemeData.columnNum;
      if (rowIndex == 0 && columnIndex != num - 1 && columnIndex != num - 2) {
        return { display: "none" };
      }
    },

最后表头：

    setColSpan() {
      var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells;
      x[this.curSchemeData.columnNum - 2].colSpan = "" + this.curSchemeData.columnNum - 1 + "";
    },

源码：

<template>
  <div class="level-expand-table">
    <el-table
      :data="curSchemeData.data"
      border
      style="width: 100%"
      :span-method="objectSpanMethod"
      :cell-style="cellStyle"
      :header-cell-style="discountHeaderStyle1"
    >
      <template v-for="(item, index) in curSchemeData.datahead">
        <el-table-column align="center" v-if="item.FULLNAME == 'NAME' && jobLevel == 2" :label="zdzjName" :key="index">
          <template slot-scope="scope">
            <span>{
   {
    scope.row.PNAME }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" v-if="item.FULLNAME == 'NAME'" :label="zdzjName" :key="item.ID">
          <template slot-scope="scope">
            <span>{
   {
    scope.row.NAME }}</span>
          </template>
        </el-table-column>
        <table-column
          v-if="!item.LEAFNODE && item.FULLNAME !== 'NAME'"
          :key="index"
          :coloumn-header="item"
        ></table-column>
        <el-table-column
          v-if="item.LEAFNODE && item.FULLNAME !== 'NAME'"
          :key="index"
          :label="item.NAME"
          :prop="item.FULLNAME"
          align="center"
        ></el-table-column>
      </template>
      <div slot="empty">
        <p v-if="!curSchemeData.btnListShow">
          <el-button
            v-for="(item, index) in curSchemeData.btnlist"
            :key="index"
            @click="handleClick(item.name)"
            type="primary"
            size="small"
          >
            <svg-icon v-if="item.name == 'GWXL'" name="sequence" :width="13" :height="14"