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

方案一：这个方案有问题

	<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')
      // })
    }

2、方案二：

比较完美的解决这个问题：

JS：

....
// 默认true
isShowTable: true
....

watch: {
    tableDate: function () {
      this.$nextTick(() => {
        this.expandAll()
      })
    }
  },
.....
 /**
     * 触发所有展开图标的click事件
     */
    expandAll () {
      // 获取点击的箭头元素
      let els = document.getElementsByClassName('el-table__expand-icon')
      for (let i = 0; i < els.length; i++) {
        els[i].click()
      }
    },
    /**
     * 展开所有下级
     */
    unFoldAll () {
      this.isShowTable = false
      this.$nextTick(function () {
        this.isShowTable = true
        let _this = this
        window.setTimeout(function () {
          _this.expandAll()
        }, 300)
      })
    },
    /**
     * 收起所有下级
     */
    foldAll () {
      this.isShowTable = false
      this.$nextTick(function () {
        this.isShowTable = true
      })
    }

HTML:

    <!-- 需要给table加一个v-if属性控制table销毁或初始化 -->
    <el-table
      v-if="isShowTable"
      :data="tableDate"
      ref="tableTreeRef"
      style=" 100%;margin-bottom: 20px;"
      :v-loading="dataListLoading"
      row-key="id"
      border
      :default-expand-all="isExpand"
      :tree-props="{children: 'positionTree'}">
      <!--岗位名称-->
      <el-table-column
        prop="positionNameCn"
        :label="$t('res.department.jobName')">
      </el-table-column>
      <!--岗位代码-->
      <el-table-column
        prop="positionCode"
        :label="$t('res.department.jobCode')"  align="center">
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        :label="$t('handle')">
      </el-table-column>
    </el-table>