解決el-table使用樹形數據導致的rowIndex數據處理問題

    項目中，el-table中使用row-class-name爲某一行添加樣式，用span-method合併列或者行，之後，我又在table中用了children樹形數據，正確效果如下所示

    但是處理數據的時候row-class-name、span-method對應的函數報錯了，具體錯誤就不說了，最後查找到原因是使用樹形數據後，因爲tabledata項中children元素的存在，row-class-name、span-method方法獲取到的rowIndex與tabledata的index是不一樣的，tabledata數據如下，tabledata的數據是無序的，哪些item有children，有多少個children都是不確定的。row-class-name等用法參考官方文檔：https://element.eleme.cn/#/zh-CN/component/table。

      tabledata: [{
        id: '0',
        functionName: '倉庫管理',
        value: 0
      }, {
        id: '1',
        functionName: '商品管理',
        value: 0,
        children: [{
          id: '1-1',
          functionName: '商品明細',
          value: 0
        }]
      }, {
        id: '2',
        functionName: '客戶入庫單',
        value: 0,
        children: [{
          id: '2-1',
          functionName: '入庫明細',
          value: 0
        }, {
          id: '2-2',
          functionName: '入庫費用',
          value: 0
        }]
      }, {
        id: '3',
        functionName: '客戶管理',
        value: 0
      }, {
        id: '4',
        functionName: '客戶列表',
        value: 0
      }]

    id=’1-1’的children渲染之後在表格中的rowIndex是2，但是想當然用tabledata[2]拿到的是id=’2’的數據，我們需要建立列表rowIndex與tabledata數據的索引關係。

    實現方式如下

    countChildren: function () {
      this.childrenList = []
      for (let i = 0; i < this.tabledata.length; i++) {
        if (this.tabledata[i].children) {
          this.childrenList.push(this.tabledata[i].children.length)
        } else {
          this.childrenList.push(0)
        }
      }
      console.log('childrenList')
      console.log(this.childrenList)
      this.calculateChildrenIndex()
    },
    // 計算table元素所佔的行index及children的index（如存在的話）
    calculateChildrenIndex: function () {
      this.childrenIndexList = []
      this.indexList = []
      for (let i = 0; i < this.childrenList.length; i++) {
        // 不是展開行的index
        let obj = {}
        obj.index = i
        this.indexList.push(obj)
        // 展開行的index
        if (this.childrenList[i]) {
          let sum = i
          for (let j = 0; j < i; j++) {
            sum = sum + this.childrenList[j]
          }
          console.log('前i項的和+長度')
          for (let k = 0; k < this.childrenList[i]; k++) {
            this.childrenIndexList.push(sum + k + 1)
            let obj = {}
            obj.index = i
            obj.subIndex = k
            this.indexList.push(obj)
          }
        }
      }
      console.log('indexlist')
      console.log(this.indexList)
      console.log(this.childrenIndexList)
    }

    countChildren()，先計算tabledata的哪些項有children，沒有children記0，有children記children的個數，最終得到childrenList: [0, 1, 2, 0, 0]。

    calculateChildrenIndex()，兩個作用，得到所有children的rowIndex數組childrenIndexList，和rowIndex與數據索引數組indexList。主要思想是，對所有的tabledata項，都創建一個對象push進數組，對象包含主索引index，當tabledata項有children時，根據之前項及children的佔位計算出在列表中的rowIndex，並且將主索引和children對應的子索引放到一個對象裏，push進數組。遍歷完成後，childrenIndexList包含了所有children的列表rowIndex，indexList的長度等於列表渲染出的行數，indexList的索引就對應列表的rowIndex，indexList[i]對應的就是數據索引關係，如果沒有children，就只有一個index屬性，有children，包含index和subIndex兩個屬性，這樣我們就可以獲取到我們所需的數據。

    應用如下

    // 合併列,注意因爲children的存在，列表的index與tabledata的index不是一樣的
    arraySpanMethod ({ row, rowIndex }) {
      if (this.childrenIndexList.indexOf(rowIndex) > -1) {
        // 對於展開行不處理,不存在合併情況
        return
      }
      let index = this.indexList[rowIndex].index
      let arr = ['倉庫管理', '客戶管理']
      if (arr.indexOf(this.tabledata[index].functionName) > -1) {
        return [1, 2]
      }
    },
    // 加深某些行背景色
    tableRowClassName ({row, rowIndex}) {
      if (this.childrenIndexList.indexOf(rowIndex) > -1) {
        // 對於展開行不處理，不存在加深情況
        return
      }
      let index = this.indexList[rowIndex].index
      let arr = ['倉庫管理', '客戶管理']
      if (arr.indexOf(this.tabledata[index].functionName) > -1) {
        return 'menuRow'
      }
      return ''
    }