Element ui 2.8版本中的table树不能默认全展开解决方法

Posted 2022-05-10 520future

    <el-table
      ref="tableTreeRef"
      :data="tableDate"
      ......
    </el-table>

js:

watch: 
    tableDate: function (nv, ov) 
      this.$nextTick(() => 
        this.unFoldAll()
      )
    
  

/**
     * 展开所有下级
     */
    unFoldAll () 
      let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr')
      for (let i = 0; i < queryResult.length; i++) 
        let item = queryResult[i]
        item.style.display = ''
        let classList = item.querySelectorAll('td > div > div')[0].classList
        classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.add('el-table__expand-icon--expanded')
      
      // IE 不支持 forEach
      // this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr').forEach(item => 
      //   item.style.display = ''
      //   let classList = item.querySelectorAll('td > div > div')[0].classList
      //   classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.add('el-table__expand-icon--expanded')
      // )
    ,
    /**
     * 收起所有下级
     */
    foldAll () 
      let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr')
      for (let i = 0; i < queryResult.length; i++) 
        let item = queryResult[i]
        if (i !== 0) 
          item.style.display = 'none'
        
        let classList = item.querySelectorAll('td > div > div')[0].classList
        classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.remove('el-table__expand-icon--expanded')
      
      // IE 不支持 forEach
      // this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr').forEach((item, index) => 
      //   if (index !== 0) 
      //     item.style.display = 'none'
      //   
      //   let classList = item.querySelectorAll('td > div > div')[0].classList
      //   classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.remove('el-table__expand-icon--expanded')
      // )