Using span method to realize row merging of multi-layer table data

Recently, I have worked on many projects that require me to table Data needs to be consolidated , I have the honor to read the methods written by my colleagues , How to say, there are all kinds of , But it's complicated , Let's summarize a simple method ：

1️⃣ First of all, let's show the effect diagram of the implementation （ The data is found on the Internet ）：

2️⃣ structural analysis ：

The row union function of the first two columns = The number of corresponding subclass names

The third column type merges rows = The number of subclass names corresponding to the type

3️⃣ Data source presentation ：

//  Simulated background data 
    getData () {
      this.tableData = [
        {
          id: 1,
          region: ' China ',
          type: [
            {
              sortName: ' apparatus ',
              sortList: [
                {
                  name: ' apparatus 1'
                },
                {
                  name: ' apparatus 2'
                }]},
            {
              sortName: ' Software ',
              sortList: [
                {
                  name: ' Software 1'
                },
                {
                  name: ' Software 2'
                },
                {
                  name: ' Software 3'
                }
              ]}]},
        {
          id: 2,
          region: ' The United States ',
          type: [
            {
              sortName: ' apparatus ',
              sortList: [
                {
                  name: ' apparatus 1'
                },
                {
                  name: ' apparatus 2'
                }]},
            {
              sortName: ' Software ',
              sortList: [
                {
                  name: ' Software 1'
                },
                {
                  name: ' Software 2'
                }]}]}]
      this.changeData()
    },

4️⃣ Page structure display

    <el-table :data="newTableData" border :span-method = "spanMethod">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="region" label=" regional "></el-table-column>
      <el-table-column prop="sortName" label=" type "></el-table-column>
      <el-table-column prop="name" label=" Subclass name "></el-table-column>
    </el-table>

5️⃣ Convert table data codes ：

    //  Convert to tabular data 
    changeData () {
      let k = 0 //k Namely newTableData The data source has idIndex The subscript position of the data 
      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
                }
                //  The first 3 Number of rows merged by column type === Number of subclasses 
                if (nameIndex === 0) {
                  obj.nameIndex = typeItem.sortList.length
                  // id Number of rows merged with the region column  === type All of them name length 
                  count += typeItem.sortList.length
                }
                this.newTableData.push(obj)
              })
            }
          })
        }
        // 1. tableData There are two rows of data below , First traversal count by 5( In each object name The number of ),k by 0
        // 2.  to tableData Of the 0 Place plus id Merge row data 
        // 3.  In the second traversal ,count by 4,k by 5, That is to say tableData Of the 5 Place plus id Merge row data 
        this.newTableData[k].idIndex = count
        k += count
      })
      console.log(this.newTableData, 'this.newTableData')
    },

6️⃣ How to merge cells ：

    //  merge cell 
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      //  If it is the first two columns , Just use idIndex Data to merge 
      if (columnIndex === 0 || columnIndex === 1) {
        if (row.idIndex) {
          return [row.idIndex, 1]
        } else {
          return [0, 0]
        }
      }
      //  If it is the third column , Just use nameIndex Data to merge 
      if (columnIndex === 2) {
        if (row.nameIndex) {
          return [row.nameIndex, 1]
        } else {
          return [0, 0]
        }
      }
    }