详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

// 模拟后台返回的值  getTable () {   this.tableData = [{    id: 1,    region: '中国',    type: [{     sortName: '器械',     sortList: [{      name: '器械1'     }, {      name: '器械2'     }]    }, {     sortName: '软件',     sortList: [{      name: '软件1'     }, {      name: '软件2'     }, {      name: '软件3'     }]    }]   }, {    id: 2,    region: '美国',    type: [{     sortName: '器械',     sortList: [{      name: '器械1'     }, {      name: '器械2'     }]    }, {     sortName: '软件',     sortList: [{      name: '软件1'     }, {      name: '软件2'     }]    }]   }]   this.dealTable()  },  // 处理表格数据  dealTable () {   let getDate = [] // 存储新表格数据   let typeIndex = [0] // 保存id,地区需要合并的值   let nameIndex = [0] // 保存类型需要合并的值   let a // id,地区需要合并的行是所有类型的长度   this.tableData.forEach((v, index) => {    if (v.type && v.type.length) {     a = 0     v.type.forEach((subV, i, typeData) => {      if (subV.sortList && subV.sortList.length) {       subV.sortList.forEach((ss, k, data) => {        if (k === data.length - 1) {         typeIndex.push(data.length) // 把每一个类型下面数据长度存起来         a += data.length // 把所有类型下面的数据长度相加         if (i === typeData.length - 1) {          nameIndex.push(a) // 类型循环完成后把数据长度存起来         }        }        getDate.push({         id: v.id,         region: v.region,         type: subV.sortName,         name: ss.name        })       })      }     })    }   })   console.log(nameIndex)   // [0, 5, 4]   // 看一下打印出来的规律,除去第一项,5是第一次需要合并的行   // 第二次合并又是从第五行开始合并4行   console.log(typeIndex)   // [0, 2, 3, 2, 2]   // 类型的数据存储规律也是一样,第一次合并2行   // 第二次从2行开始,合并3行,以此类推   // 根据这个规则,只需要给数据加上两个额外的属性控制是否合并就OK   let k = 0   let t = 0   nameIndex.forEach((v, i, nameArr) => {    if (nameArr[i + 1]) {     getDate[k].nameIndex = nameArr[i + 1]     k += nameArr[i + 1]    }   })   typeIndex.forEach((v, i, typeArr) => {    if (typeArr[i + 1]) {     getDate[t].typeIndex = typeArr[i + 1]     t += typeArr[i + 1]    }   })   this.tableData6 = getDate   console.log(getDate)   // 0: {id: 1, name: "器械1", nameIndex: 5, region: "中国", type: "器械", typeIndex: 2},   // 1: {id: 1, name: "器械2", region: "中国", type: "器械"}   // ....   // 5: {id: 2, name: "器械1", nameIndex: 4, region: "美国", type: "器械", typeIndex: 2}  },  // 表格合并方法  arraySpanMethod ({ row, column, rowIndex, columnIndex }) {   if (columnIndex === 0 || columnIndex === 1) {    if (row.nameIndex) { // 如果有值,说明需要合并     return [row.nameIndex, 1]    } else return [0, 0]   }   if (columnIndex === 2) {    if (row.typeIndex) {     return [row.typeIndex, 1]    } else return [0, 0]   }  },

<el-table  :data="tableData6"  :span-method="arraySpanMethod"  border  style="width: 100%">  <el-table-column   prop="id"   label="ID"   width="180">  </el-table-column>  <el-table-column   prop="region"   label="深圳">  </el-table-column>  <el-table-column   prop="type"   label="类型">  </el-table-column>  <el-table-column   prop="company"   label="企业名称">  </el-table-column> </el-table>

getIndex () {   let arr = []   let s = 0   let table = this.tableData6   let getTable = []   table.forEach((item, i, data) => {    if (arr.length) {     s = arr[arr.length - 1].row + data[i - 1].company.length    }    arr.push({     row: s,     index: item.company.length    })    if (item.company && item.company.length) {     item.company.forEach(subItem => {      getTable.push({       id: item.id,       region: item.region,       type: item.type,       company: subItem.name      })     })    }   })   this.arr = arr   this.tableData6 = getTable  },

// 合并表格方法  arraySpanMethod ({ row, column, rowIndex, columnIndex }) {   if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {    let obj = [0, 0]    this.arr.some(v => {     if (rowIndex === v.row) {      obj = [v.index, 1]     }    })    return obj   }  }