<el-tree
          class="filter-tree"
          ref="tree"
          accordion
          :data="leftData"
          @node-click="handleNodeClick"
          node-key="listId"
          :current-node-key="currentNodeKey"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="idArr"
          lazy
          :load="loadNode"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip
              class="item"
              effect="dark"
              :content="node.label"
              placement="top-start"
            >
              <span :id="data.listId">{{ node.label }}</span>
            </el-tooltip>
          </span>
 </el-tree>

import {
  getMenuList,
  getNodeMenuList,
  getDataList,
} from "@/api/index";
export default {
data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
      },
      currentNodeKey: "",
      leftData:[],
    }
  },
  methods:{
	// 懶加載獲取數(shù)據(jù)
    loadNode(node, resolve) {
      if (node.level === 0) {// 第一層數(shù)據(jù)
      getMenuList({}).then((res) => {
      //左面導(dǎo)航欄省份信息
      if (res.data.resp_code == "200") {
        let data = res.data.datas;
        for (let key in data) {
          this.leftData.push({
            name: key,
            listId: key,
          });
        }
      }
    });
        return resolve(this.leftData);
      }
      if (node.level === 1) {// 第二層數(shù)據(jù)
        let provinceName = {
          provinceName: node.label, //上海
        };
        let twoList = [];
        getNodeMenuList(provinceName).then((res) => {
          res.data.datas.forEach((items) => {
            twoList.push({
              listId: items.listID,
              name: items.nodeName,
              provinceName: items.provinceName,
              children: [],
            });
            twoList.isLeaf = true;
          });
        });
        setTimeout(() => {
          resolve(twoList);
        }, 1000);
      }
      if (node.level == 2) {//第三層數(shù)據(jù)
        let obj = {
          nodeName: node.data.name,
          provinceName: node.data.provinceName,
        };
        let children = [];
        getDataList(obj).then((res) => {
          if (res.data.resp_code == "200") {
            res.data.datas.forEach((item, index) => {
              node.data.children.push({
                description: item.description,
                links: item.links,
                listId: item.listId,
                name: item.name,
                provinceName: item.provinceName,
                isLeaf: true,// 判斷是不是子節(jié)點（最后一層數(shù)據(jù) 是否顯示下拉圖標） 如果不顯示下拉圖標為true 如果顯示就可以不寫
              });
            });
          }
        });
        resolve(node.data.children);
      }
      if (node.level > 2) {
        resolve([]);
      }
    },
}
}

 <el-tree
   :props="props"
   :load="loadNode"
   lazy
   node-key="id"
   :expand-no-click-node="true"
   ref="tree"
   show-checkbox
   :check-strictly="true"
   @check="checkClick"
 >
 </el-tree>

<script>
export default {
  data(){
    return{
      props:{
        // 用來控制展示節(jié)點內(nèi)容的字段，根據(jù)后端數(shù)據(jù)自定義 label 值是什么
        label:'text',
        // 子級存放的位置，拼接數(shù)據(jù)時候把子級放到這里定義 childNodes 的字段中，字段名稱自定義 注意：childNodes 是個數(shù)組。
        children:'childNodes',
        // 用來判斷是否為最后一級子節(jié)點
        isLeaf:'lastNode',
        // 這里的 id 是用來關(guān)聯(lián)上面 node-key="id" 因為這里的樹使用 checkbox 所以用到了 node-key="id" 和 id， 正常的只是單純加載tree的話是不需要的，看需求嘍
        id:"id"
      }
    }
  }
};
</script>

methods: {
    // 功能講解
    /* 默認參數(shù)：
       node：每加載一次當(dāng)前加載的節(jié)點的所有數(shù)據(jù)
       reslove：渲染數(shù)據(jù)的方法，把得到該節(jié)點的所有數(shù)據(jù)(數(shù)組)放到該方法中 return 出去,節(jié)點就能渲染出來了。
     */
    async loadNode(node, reslove) {
      /* 
        判斷是跟節(jié)點還是子節(jié)點，
        當(dāng) node.level == 0 的時候就是 tree 的跟節(jié)點（第一層；
        當(dāng)  node.level 不等于 0 的情況就是每一層的節(jié)點了，沒必要一直判斷 level 是多少級別，除非有特殊需求
       */
      if (node.level == 0) {
        // 這里是請求接口，根據(jù)自己的項目請求接口就可以。
        let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${this.$store.state.userInfo.cityId}/`)
        // 這里就提到了 props 對象中的 disabled 屬性的用法，通過找到請求接口找到滿足條件的數(shù)據(jù)，然后這個給滿足條件的數(shù)據(jù)添加一個 disabled = true 就可以實現(xiàn) checkbox 禁用的效果了。
        resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
        // 將請求回來的數(shù)據(jù)放到 reslove() 方法中渲染出來。
        return reslove(resultValue.nodes)
      } else {
        let endType = node.data.itemType.split('#')[1];
        let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${node.data.id}/${endType}`)
        /* 
          這里就是 props 對象中 isLeaf 屬性的用法，上看我們定義的 isLeaf=‘lastNode'，
          通過循環(huán)請求回來的數(shù)據(jù)，hasChildren 值為 flase (這個值一般都是后端設(shè)置數(shù)據(jù)的時候有帶，至于是什么字段就得看后端是怎么定義的)，用來判斷是否還有下一級別， 
          當(dāng) hasChildren 值為 flase 的時候就可以給 請求回來的數(shù)據(jù)中添加一個 lastNode = true 的鍵值了，這就在你點開改節(jié)點的父級的時候就不回有提示 ，還能展開的三角箭頭了。
        */
        resultValue.nodes.forEach(item => {
          item.hasChildren == false ? item.lastNode = ture : null
        });
        /* 
          這里是 props 對象中 children: 'childNodes' 屬性的用法，因為是懶加載每次求情回來的數(shù)據(jù)都是沒有和上面的數(shù)據(jù)有關(guān)聯(lián)的一個數(shù)組，這時用想通過 el-tree 來實現(xiàn)樹型結(jié)構(gòu)的話我們就要拼裝數(shù)據(jù)，將去回來的數(shù)據(jù)拼裝到 當(dāng)前節(jié)點的 childNodes 鍵值當(dāng)中即可
        */
        node.data.childNodes = resultValue.nodes
        resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
        return reslove(resultValue.nodes)
      }
    },
    // 套用模版
    async loadNode(node, reslove) {
      if (node.level == 0) {
        let res = await getData()
        return reslove(res.data)
      } else {
        let res = await getData()
        // 判斷是否為最底層節(jié)點 根據(jù)自己接口返回的數(shù)據(jù)判斷即可
        res.data.forEach(item => {
          item.hasChildren == false ? item.lastNode = ture : null
        });
        return reslove(res.data)
      }
    },
  },