關於表格合並span-method方法的補充(表格數據由后台動態返回)

之前寫了一些關於element-ui表格合並的方法,不過用的數據都是確定的數據(死數據),但是很多時候我們的數據都是通過后台獲得的,數據不穩定,這個時候使用表格合並就需要先處理一下數據,先看一下一種很常見的數據展示場景

 

 

直接上代碼,HTML代碼就不放了,都是差不多的,下面另一種場景有

// 模擬后台返回的值
    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]
      }
    },

 

 

再說一下另一種場景,用的另一種方法實現,原理都是大同小異

 

 

假設后台返回的數據是這樣的:

 

 

在這種情況下,一般我們會選擇對行進行合並,因為這時候表格的列是知道的,只要把需要合並的列提取出來,合並行就OK,下面看代碼

HTML代碼

<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>

 

js代碼,首先需要處理一下后台數據

 

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
      }
    }

 

PS: 在這里說一下樓主遇到的一個坑,其實也是因為對函數的return不熟悉造成的,一開始我是這樣寫的,

 

結果頁面一直不對,debugger了一下,發現函數中根本沒接收到return回去的數據,這是因為我return之后又寫了代碼,函數真正結束時沒有返回值.所以在函數中,return之后就不要在寫執行代碼了.

 

正確的寫法后debugger就能接收到正確的返回值了