el-table 合併相同資料的列

<template>
  <div class="hello1">
     <el-table
     :data="tableData"
     border
     :span-method="spanMethod"
     :cell-style="cellStyle"
     :header-cell-style="titleHeader"
     >
       <el-table-column v-for="(item,i) in titleData" :key='i' :prop="item.name" :label='item.label'></el-table-column>
     </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 所有要合併的數量（一行一行的開始）
      spanAll:[],
      titleData:[
        {
          name:'col1',
          label:'AAA'
        },
        {
          name:'col2',
          label:'BBB'
        },
        {
          name:'col3',
          label:'CCC'
        },
        {  
          name:'col4',
          label:'DDD'
        }
      ],
       tableData:[
         {
           col1:1,
           col2:2,
           col3:3,
           col4:4
         },
         {
           col1:2,
           col2:2,
           col3:4,
           col4:4
         },
         {
           col1:6,
           col2:2,
           col3:7,
           col4:5
         },
         {
           col1:5,
           col2:4,
           col3:7,
           col4:9
         },
       ]
    }
  },
  created() {
    this.titleData.forEach(val => {
      this.getSpanNum(val.name)
    })
  },
  methods:{
    // 單元格樣式
    cellStyle({row, column, rowIndex, columnIndex}) {
      return 'text-align:center'
    },
    // 表頭樣式
    titleHeader({row, column, rowIndex, columnIndex}){
      return 'text-align:center'
    },
    spanMethod({row, column, rowIndex, columnIndex}) {
      // 得到行合併的資料
      const rowNum= this.spanAll[columnIndex][rowIndex]
      // 列合併
      const colNum = rowNum > 0 ? 1 : 0
      console.log(colNum, '44', rowNum)
      // 當前位置的行合併和列合併資料
      return {
        rowspan: rowNum,
        colspan: colNum
      }
    },
    getSpanNum(curName) {
      const data = this.tableData
      const spanArry = []
      let pos = 0
      data.forEach((val,i) => {
        if(i===0){
          spanArry.push(1)
          pos = 0
        } else {
          // 判斷當前列資料與下一行的該列資料是否相同
          if (data[i][curName] === data[i-1][curName]) {
            // 每一列每一行的合併數量
            spanArry[pos] += 1
            spanArry.push(0)
          } else {
            spanArry.push(1)
            pos = i
          }
        }
      })
      // 把合併資料放入spanAll裡面
      this.spanAll.push(spanArry)
    }
  }
}
</script>
<style>

</style>

執行結果：