element-ui表格動態合並單元格

第一步：添加 element-ui table自帶方法span-method

<el-table :data.sync="data"
          border
          :header-cell-style="{ background: '#027db4', color: '#fff' }"
          :span-method="objectSpanMethod">
　　<el-table-column type="index"
              align="center"
              label="序號"></el-table-column>
   　　<el-table-column v-for="(item, index) in tableHeaders"
                  :key="index"
                  :prop="item.prop"
                  :label="item.lable"
                  :width="item.width"
                  align="center"></el-table-column>
</el-table>

　　第二步：

data() {
    return {
      tableHeaders: [
        //表頭
        { prop: 'firstLevelIndex', lable: '一級指標', width: '150' },//需要合並的字段 
        { prop: 'secondLevelIndex', lable: '二級指標', width: '150' },//需要合並的字段
        { prop: 'indexDesc', lable: '指標描述', width: '400' },//需要合並的字段
        { prop: 'indexSub', lable: '考核分項', width: '400' },
        { prop: 'unit', lable: '計量單位', width: '50' },
        { prop: 'baseScore', lable: '基本分', width: '70' },
        { prop: 'aimValue', lable: '目標值', width: '70' },
        { prop: 'fillValue', lable: '填報值', width: '70' },
        { prop: 'fillDesc', lable: '填報說明', width: '' },
      ],
      data: [], //列表數據
      firstLevelIndexArr: [], // 一個空的數組，用於存放第一列每一行記錄的合並數  控制第一列的合並
      firstLevelIndexPos: 0, // firstLevelIndexArr 的索引
      secondLevelIndexArr: [], // 一個空的數組，用於存放第二列每一行記錄的合並數  控制第二列的合並
      secondLevelIndexPos: 0,
      indexDescArr: [], // 一個空的數組，用於存放第三列每一行記錄的合並數   控制第三列的合並 以此類推 每多控制一列，多創建兩個變量
      indexDescPos: 0,
    }
  },

第三步：方法

mounted() {
    //調接口
    getItemizedFillTableList().then((res) => {
      if (res.code == 200) {
        this.data = res.data
        this.getSpanArr(this.data)//調用合並單元格方法
      }
    })
  },

methods: {

getSpanArr(data) {
      // firstLevelIndexArr/secondLevelIndexArr來存放要合並的格數，同時還要設定一個變量firstLevelIndexPos/secondLevelIndexPos來記錄
      this.firstLevelIndexArr = []
      this.secondLevelIndexArr = []
      this.indexDescArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.firstLevelIndexArr.push(1)
          this.firstLevelIndexPos = 0
          this.secondLevelIndexArr.push(1)
          this.secondLevelIndexPos = 0
          this.indexDescArr.push(1)
          this.indexDescPos = 0
        } else {
          // 判斷當前元素與上一個元素是否相同(第1和第2列)
          if (data[i].firstLevelIndex === data[i - 1].firstLevelIndex) {
            this.firstLevelIndexArr[this.firstLevelIndexPos] += 1
            this.firstLevelIndexArr.push(0)
          } else {
            this.firstLevelIndexArr.push(1)
            this.firstLevelIndexPos = i
          }
          // 判斷當前元素與上一個元素是否相同(第3列)
          if (data[i].secondLevelIndex === data[i - 1].secondLevelIndex) {
            this.secondLevelIndexArr[this.secondLevelIndexPos] += 1
            this.secondLevelIndexArr.push(0)
          } else {
            this.secondLevelIndexArr.push(1)
            this.secondLevelIndexPos = i
          }
          // 判斷當前元素與上一個元素是否相同(第4列)
          if (data[i].indexDesc === data[i - 1].indexDesc) {
            this.indexDescArr[this.indexDescPos] += 1
            this.indexDescArr.push(0)
          } else {
            this.indexDescArr.push(1)
            this.indexDescPos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.firstLevelIndexArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      } else if (columnIndex === 2) {
        const _row = this.secondLevelIndexArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      } else if (columnIndex === 3) {
        const _row = this.indexDescArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
}

效果圖：