iview 动态合并table组件单元格

原文章地址：https://blog.csdn.net/wakaka112233/article/details/107210611

HTML代码
 // :span-method="handleSpan" 给想要合并的table组件绑定方法
<div>
   <Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</div>

// iview 单元格合并
  handleSpan ({ row, column, rowIndex, columnIndex }) {
      //合并第1列,这里columnIndex==0,根据需求的不同，需要前端写死
      if(columnIndex == 0) {
          //计算合并的行数列数
          let x = row.mergeColumn == 0 ? 0:row.mergeColumn
          let y = row.mergeColumn == 0 ? 0:1
          return [x, y]
      }
      //合并第4列
      if(columnIndex == 4) {
          //计算合并的行数列数
          let x = row.mergeColumn == 0 ? 0:row.mergeColumn
          let y = row.mergeColumn == 0 ? 0:1
          return [x, y]
      }
  },
  assembleData(data){
      let names = []
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach(e => {
          if(!names.includes(e.jobName)){
              names.push(e.jobName)
          }
      })
      let nameNums = []
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach(e => {
          nameNums.push({jobName:e,num:0})
      })
      //计算每种 name值所在行需要合并的单元格数
      data.forEach(e => {
          nameNums.forEach(n => {
              if(e.jobName == n.jobName){
                  n.num++
              }
          })
      })
      //将计算后的合并单元格数整合到 data中
      data.forEach(e => {
          nameNums.forEach(n => {
              if(e.jobName == n.jobName){
                  if(names.includes(e.jobName)){
                      e.mergeColumn = n.num
                      //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                      names.splice(names.indexOf(n.jobName),1)
                  } else {
                      //被合并的单元格设置为 0
                      e.mergeColumn = 0
                  }
              }
          })
      })
      //将整理后的数据交给表格渲染
      this.identicalList = data
  },
  mounted(){
/**-- 在mounted中将想要合并的数组放入方法中使这个数组相同名字的单元格合并 --**/
        this.assembleData(this.resData)
    }