实现el-table表格动态合并

在Vue项目中，我们经常使用的组件库就是element，但是根据一些夸张的需求我们可能要进行一些数据处理和组件的处理，对于el-table单元格的合并组件中也存在案例，但是那都是写死的 我们需要一个动态的合并

 如上图所示 我们要根据左侧三列进行每一列的相同名称合并，对每一行相同名称也进行一个合并，当时也在网上查找了一些案例 该图也是其中一个案例的数据，不过那是写死的需要一个一个去配置  如果数据过多就比较麻烦 ,下面是全部的代码 数据可以自己添加调试一下

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width:100%"
      class="work-excel-table"
      border
      stripe
      highlight-current-row
      :span-method="arraySpanMethod"
      show-summary
    >
      <el-table-column label="作品类型" fixed width="200">
        <el-table-column label="登记情况" fixed width="200">
          <el-table-column label fixed show-overflow-tooltip width="70">
            <template #default="scope">{{ scope.row.columnName1 }}</template>
          </el-table-column>
          <el-table-column label fixed show-overflow-tooltip width="70">
            <template #default="scope">{{ scope.row.columnName2 }}</template>
          </el-table-column>
          <el-table-column label fixed show-overflow-tooltip width="60">
            <template #default="scope">{{ scope.row.columnName3 }}</template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="文字" width="60">
        <el-table-column label="大班" width="60">
          <template #default="scope">{{ scope.row.anlaysisWorkTypeDTO.a.value }}</template>
        </el-table-column>
        <el-table-column label="小班" width="60">
          <template #default="scope">{{ scope.row.anlaysisWorkTypeDTO.a.value }}</template>
        </el-table-column>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
   
      tableData: [
                {
                   columnName1: "数据库A",
                   columnName2: "受理",
                   columnName3: "受理",
                   anlaysisWorkTypeDTO:{
                         a:{value：0}
                    }
                }

        
      ],
     
    };
  },

  created() {},
  mounted() {
  
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 只进行前3列数据的合并
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        //判断相应列的对应字段名称
        let columnName =
          columnIndex == 0 ? 'columnName1' : columnIndex == 1 ? 'columnName2' : 'columnName3';

        if (rowIndex === 0 || row[columnName] !== this.tableData[rowIndex - 1][columnName]) {
          return this.getTableColumn(row, rowIndex, columnIndex);
        } else {
          return [0, 0];
        }
      }
  
    },
    // 获取当前列的数据是否有需要合并的
    getTableColumn(row, rowIndex, columnIndex) {
      let columnName =
        columnIndex == 0 ? 'columnName1' : columnIndex == 1 ? 'columnName2' : 'columnName3';
      let val = row[columnName];
      let rowspan = 1;
      let colspan = 1;
      for (let i = rowIndex + 1; i < this.tableData.length; i++) {
        if (this.tableData[i][columnName] === val) {
          rowspan++;
        }
        if (this.tableData[i][columnName] !== val) {
          break;
        }
      }
      if (row.columnName1 == row.columnName2 && row.columnName1 == row.columnName3) {
        if (columnIndex == 0) {
          colspan = 3;
            //如果在第一列第一行三个名称已经相等了 后面就要删除对应列的格子 不然会被往后撑开导致数据错乱
        } else {
          return [0, 0];
        }
      } else if (row.columnName1 == row.columnName2) {
        if (columnIndex == 0) {
          colspan = 2;
             //同理也需要删除掉格子
        } else {
          return [0, 0];
        }
      } else if (row.columnName2 == row.columnName3) {
        if (columnIndex == 1) {
          colspan = 2;
        } else if (columnIndex == 2) {
          return [0, 0];
        }
      } else {
        colspan = 1;
      }
      return [rowspan, colspan];
    }
  }
};
</script>

<style lang='scss' scoped>
//样式需要加上不然会出现三个空格的格子
  .work-excel-table {
    /deep/ .el-table__header-wrapper .el-table__header .is-group tr:last-of-type {
      display: none;
    }
  }
</style>