element中樹形數據與懶加載實現全部展開和全部收起

element中屬性懶加載數據

 

 

 

 

 

default-expand-all屬性：：是否默認展開所有行，當 Table 包含展開行存在或者為樹形表格時有效

如果在表格頭上加上一個按鈕實現全部展開與收起 類似如圖這種  默認是【全部展開】按鈕，點擊后，樹狀列表下所有數據為展示，按鈕變為【全部收起】；點擊【全部收起】時，樹狀列表下所有數據為收起狀態，即返回默認狀

 

 

 

 如果動態設置控制default-expand-all樹狀圖是不發生變化的 也就是不起作用。

解決方法：上代碼：

<template>
    <div class="app-container">
      <el-form :inline="true" label-width="90px">
        <el-form-item>
          <el-button v-if="open" type="primary" style="margin-bottom:10px;" @click="Toexpandall">全部展開</el-button>
          <el-button v-if="close" type="primary" style="margin-bottom:10px;" @click="ToClose">全部收起</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        row-key="svrId"
        ref="tabletree"
        :data="treeList" 
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="svrName" label="姓名"></el-table-column>
        <el-table-column prop="svrTypeName" label="服務商類型" align="center" ></el-table-column>
        <el-table-column prop="svrMobile" label="手機號" align="center" ></el-table-column>
        <el-table-column prop="svrId" label="賬號" align="center" ></el-table-column>
        <el-table-column prop="businessLevelName" label="等級" align="center" ></el-table-column>
      </el-table>
    </div>
</template>

<script>
import { treelist } from "@/api/svrmanage/apply"
export default {
  name: "treeList",
  data() {
    return {
      // 遮罩層
      loading: true,
      // 表格樹數據
      treeList: [],
      open: true,
      close:false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查詢部門列表 在這里調后端接口進行數據渲染 */
    getList() {
      this.loading = true;
      treelist().then(response => {
        if(response.code === 200) {
          this.treeList = response.data;
          this.loading = false;
        }
      });
    },
    // 全部展開
    Toexpandall() {
      let els = document.getElementsByClassName('el-table__expand-icon')
      if(this.treeList.length !=0 && els.length != 0){
        this.open = false
        this.close = true
        for(let j1=0;j1<els.length;j1++){
          els[j1].classList.add("dafult") 
        }
        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
          const open = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
          for(let j=0;j<open.length;j++){
            open[j].classList.remove("dafult")
            // open[j].classList.remove("el-table__expand-icon--expanded")
            // open[j].click(function(event) {
            //   event.preventDefault();
            // })
          }
          const dafult = this.$el.getElementsByClassName('dafult')
          for(let a=0;a<dafult.length;a++){
            dafult[a].click()
          }
        }
      }
    },
    // 全部收起
    ToClose() {
      if(this.treeList.length !=0){
        this.open = true
        this.close = false
        const elsopen = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
          for(let i=0;i<elsopen.length;i++){
            elsopen[i].click()
          }
        }
      }
    }
  }
};
</script>

這樣寫也會解決全部展開與收起時引起反向展開與收起的bug。

總結：

　　1.樹形圖全部展開的時候會有一個類名  el-table__expand-icon--expanded

　　2。先獲取所有的數據包括節點。添加一個類名 （dafult）注意類名隨便起。

　　3。判斷：如果不存在el-table__expand-icon--expanded就移除剛才添加的類名dafult）。進而是實現點擊事件

　　4.點擊全部收起按鈕的時候只要存在類名el-table__expand-icon--expanded就實現點擊事件 

 

如果不對之處或改善的地方歡迎指出。