运用span-method巧妙实现多层table数据的行合并

最近工作的项目遇到很多需要对table数据进行合并行的需求，鄙人有幸看了下同事们写的方法，怎么说呢各式各样的都有，但是都蛮复杂，下面给大家总结一种比较简单的方法吧：

1️⃣首先咱们展示一下实现的效果图（数据是在网上找出来的）：

2️⃣结构分析：

前两列的行并函数 = 对应的子类名称个数

第三列类型合并行数 = 类型对应的子类名称个数

3️⃣数据源展示：

// 模拟的后台数据
    getData () {
      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.changeData()
    },

4️⃣页面结构展示

    <el-table :data="newTableData" border :span-method = "spanMethod">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="region" label="地域"></el-table-column>
      <el-table-column prop="sortName" label="类型"></el-table-column>
      <el-table-column prop="name" label="子类名称"></el-table-column>
    </el-table>

5️⃣转换表格数据代码：

    // 转换成为表格数据
    changeData () {
      let k = 0 //k就是newTableData数据源中拥有idIndex数据的下标位置
      this.tableData.forEach(item => {
        let count = 0
        if (item.type && item.type.length) {
          item.type.forEach(typeItem => {
            if (typeItem.sortList && typeItem.sortList.length) {
              typeItem.sortList.forEach((nameItem, nameIndex) => {
                let obj = {
                  id: item.id,
                  region: item.region,
                  sortName: typeItem.sortName,
                  name: nameItem.name
                }
                // 第3列类型合并行数===子类个数
                if (nameIndex === 0) {
                  obj.nameIndex = typeItem.sortList.length
                  // id与地域列合并行数 === type下所有name长度
                  count += typeItem.sortList.length
                }
                this.newTableData.push(obj)
              })
            }
          })
        }
        // 1. tableData下有两行数据，第一次遍历count为5(每个对象中name的个数)，k为0
        // 2. 给tableData的第0位加上id合并行数据
        // 3. 第二次遍历时，count为4，k为5，即在tableData的第5位加上id合并行数据
        this.newTableData[k].idIndex = count
        k += count
      })
      console.log(this.newTableData, 'this.newTableData')
    },

6️⃣合并单元格方法：

    // 合并单元格
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      // 如果是前两列，就使用idIndex数据来进行合并
      if (columnIndex === 0 || columnIndex === 1) {
        if (row.idIndex) {
          return [row.idIndex, 1]
        } else {
          return [0, 0]
        }
      }
      // 如果是第三列，就使用nameIndex数据来进行合并
      if (columnIndex === 2) {
        if (row.nameIndex) {
          return [row.nameIndex, 1]
        } else {
          return [0, 0]
        }
      }
    }