Element中table组件按照属性执行合并操作详解

 <el-table :data="tableData" :span-method="objectSpanMethod">
   <el-table-column prop="id" label="ID" width="180"> </el-table-column>
</el-table>

getSpanArr(data) {
      this.spanArr = [];
      this.spanCodeArr = [];
      this.spanProxyArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.spanCodeArr.push(1);
          this.spanProxyArr.push(1);
          this.pos = 0;
          this.codePos = 0;
          this.proxyPos = 0;
        } else {
          Object.keys(this.columns).forEach((item, index) => {
            if (index === 0) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            } else if (index === 1) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanCodeArr[this.codePos] += 1;
                this.spanCodeArr.push(0);
              } else {
                this.spanCodeArr.push(1);
                this.codePos = i;
              }
            } else if (index === 2) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanProxyArr[this.proxyPos] += 1;
                this.spanProxyArr.push(0);
              } else {
                this.spanProxyArr.push(1);
                this.proxyPos = i;
              }
            }
          });
        }
      }
    },

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanCodeArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        const _row = this.spanProxyArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }

<q-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        height="400"
        style="width: 100%">
       <q-table-column v-for="(item,index) in Object.keys(columns)" :key="index"
          :prop="item"
          :label="columns[item]">
       </q-table-column>
      </q-table>