element 表格两级单元格合并功能

代码如下

<template>
  <div class="GlobalSituation">
    <el-table class="control-table master-table" :data="tableList.tableData" style="width: 100%;" border :span-method="spanMethod" :row-class-name="tableRowClassName">
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          <div class="table-index">{{ (scope.row.group) + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column v-for="(val,index) in tableList.tableHeader" :key="index" :prop="val.displayName" :label="val.name" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'GlobalSituation',
  components: {},
  directives: {},
  filters: {},
  mixins: [],
  // props: ['tableList'],
  data() {
    return {
      tableList: {
        tableHeader: [{ name: '阶段', displayName: 'stage' }, { name: '名字', displayName: 'plotcode' }, { name: '代码', displayName: 'landCode' }, { name: '性质', displayName: 'landUse' }, { name: '面积（m2）', displayName: 'area' }, { name: '概率', displayName: 'volumeRate' }, { name: '密度（%）', displayName: 'buildingDensity' }, { name: '成功率（%）', displayName: 'greenRate' }, { name: '高度（m)', displayName: 'buildingHeight' }],
        tableData: [
          {
            id: 1,
            stage: '调整前',
            plotcode: 'A01-01',
            landCode: 'R2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          },
          {
            id: 1,
            stage: '调整前',
            plotcode: 'A01-01',
            landCode: 'R2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          },
          {
            id: 1,
            stage: '调整后',
            plotcode: 'A02-04',
            landCode: 'R2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }, {
            id: 2,
            stage: '调整前',
            plotcode: 'A01-03',
            landCode: 'G2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }, {
            id: 2,
            stage: '调整前',
            plotcode: 'A03-03',
            landCode: 'G2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }, {
            id: 2,
            stage: '调整前',
            plotcode: 'A03-06',
            landCode: 'G1',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }, {
            id: 2,
            stage: '调整后',
            plotcode: 'A02-06',
            landCode: 'G2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }, {
            id: 2,
            stage: '调整后',
            plotcode: 'A02-06',
            landCode: 'G2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          },
          {
            id: 2,
            stage: '调整后',
            plotcode: 'A0222-06',
            landCode: 'G2',
            landUse: '王小虎',
            area: 76017.86,
            volumeRate: 2.5,
            buildingDensity: 35,
            greenRate: 35,
            buildingHeight: 80
          }
        ]
      },
      spanArr: [],
      position: 0,
      needSpan: ['stage', 'id'], // 需要合并的属性
      spanArrObj: {
        stage: [],
        id: []
      }
    }
  },
  created() {
    this.getSpanArr()
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // 表格行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.stage === '调整前') {
        return 'highlight-row'
      } else {
        return ''
      }
    },
    getSpanArr() {
      this.needSpan.forEach(item => {
        this.rowspan(item)
      })
    },
    // 获取合并行参数(数组)
    rowspan(prop) {
      this.tableList.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArrObj[prop].push(1)
          this.position = 0
        } else {
          if (this.tableList.tableData[index][prop] === this.tableList.tableData[index - 1][prop]) {
            this.spanArrObj[prop][this.position] += 1
            this.spanArrObj[prop].push(0)
          } else {
            this.spanArrObj[prop].push(1)
            this.position = index
          }
        }

        // 获取表格的序号
        if (index === 0) {
          item.group = index //先设置组号赋值为0 也就是序号
        } else {
          // stage字段相同进行合并
          if (item.id === this.tableList.tableData[index - 1].id) {
            item.group = this.tableList.tableData[index - 1].group //如果一样 将组号改为和上一个数据相同
          } else {
            item.group = this.tableList.tableData[index - 1].group + 1 //如果不一样 将组号设置为上一个数据的组号加1
          }
        }
      })
      console.log(this.spanArrObj)
    },


    // 合并行方法
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArrObj['id'][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 1) {
        const _row = this.spanArrObj['stage'][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.GlobalSituation {
  /deep/.el-table .success-row {
    background: #f5f7fa;
  }
  /deep/.el-table--border td:first-child .cell,
  /deep/.el-table--border th:first-child .cell {
    padding-left: 10px;
  }
  .el-table /deep/ .highlight-row {
    background-color: #f1fafd;
  }
}
</style>