vue异步树点击父节点勾选框自动展开已经勾选上子节点，类似勾选父全选

// 会显得时候把第一层第一层搞成一个[],第三层勾选的传给后端另一个参数
// 调用 this.expandNodes([],()=>{[]})

<template>

  <div>
    <el-input type="text" v-model='nodeDataIds' placeholder="请输入结点数据ID(多个以逗号分割)">
    </el-input>
    <el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展开指定结点</el-button>
    <el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">选中指定结点</el-button>
    <el-tree
        :props="mulprops"
        :load="loadNode"
        lazy
        node-key="id"
        show-checkbox
        accordion
        @check-change="handleCheckChange"
        :filter-node-method="filterNode"
        ref="tree"
        :default-checked-keys="defaultCheckedNodes"
        :default-expanded-keys="defaultExpandedNodes"
    >
    </el-tree>

   </div>
</template>

<script>
import {deepClone} from "../../utils";
import {pbocbdmsreport, pbocbdmsReportListTargets, pbocbdmsReportListXms} from "../../utils/api";

export default {
  name: "index.vue",
  data() {
    return {
      mulprops: {
        label: 'excelName',
        children: 'children',
        isLeaf: 'leaf',
      },
      defaultCheckedNodes: [],
      defaultExpandedNodes: [],
      expandedNodes: [], //保存已展开节点
      keepValue: [],
      targetDataMap: {},
      isLoading: false,
      recursiveRemainCount: 0,
      nodeDataIds: 'ods_zq_zqgs_fxkz_m,ods_zq_zqgs_fxkz_mzq00001,ods_zq_zqgs_fxkz_mzq00002,ods_zq_zqgs_fxkz_mzq00003'
    };
  },
  methods: {
    // 首次加载一级节点数据函数
    getpbocbdmsreport(resolve) {
      pbocbdmsreport().then(res => {
        if (res.code == 200) {
          let arr = []
          res.data.map(function (value) {
            let json1 = {
              excelName: '',
              tableName0: '',
              id: value.tableName, tableName: '',
              // disabled: true,
              children: [],
              hasXm: ''
            }
            json1['excelName'] = value.excelName
            json1['tableName'] = value.tableName
            json1['tableName0'] = value.tableName
            json1['hasXm'] = value.hasXm
            arr.push(json1)
          })
          resolve(arr)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 第二层加载节点函数
    getpbocbdmsReportListXms(node, resolve) {
      pbocbdmsReportListXms({tableName: node.data.tableName}).then(res => {
        if (res.code == 200) {
          let arr = []
          res.data.map(function (value) {
            let json2 = {
              excelName: '',
              xmCode: '',
              tableName0: '',
              tableName: '',
              children: [],
              hasXm: node.data.hasXm,
              // disabled: true,
              oneParendId: node.data.tableName,
              id: `${node.data.tableName}${value.xmCode}`
            }
            json2['excelName'] = value.xmAlias
            json2['xmCode'] = value.xmCode
            json2['tableName'] = value.tableName
            json2['tableName0'] = node.data.tableName
            arr.push(json2)
          })
          resolve(arr)
        }
      })
    },
    // 第三次加载节点逻辑
    getpbocbdmsReportListTargets(node, resolve) {
     if(!this.isLoading){
         this.isLoading = true

         //调后端接口拿数据
         this.getpbocbdmsReportListTargetsdata(node, resolve)
     }else{
          //从缓存中取数据
          this.getCacheData(node,resolve)
      }
    },
    getCacheData(node,resolve){
        let that = this;
        if(!this.isLoading){
             //数据加载完毕，直接从缓存中拿数据
             const map = this.targetDataMap;
             let targetDataList = map[node.data.tableName];
             if (targetDataList) {
                 targetDataList = deepClone(targetDataList);
                 for(let i=0; i< targetDataList.length; i++){
                     let targetData = targetDataList[i]
                     if (targetData) {
                       targetData.tableName = node.data.tableName
                       targetData.tableName0 = node.data.tableName
                       targetData.xmCode = node.data.xmCode
                       targetData.excelName1 = node.data.excelName
                       targetData.id = `${node.data.tableName}${node.data.xmCode}${targetData.targetCode}`
                     }
                 }
                 resolve(targetDataList)
               }
        }else{
            //延时递归获取缓存数据
            setTimeout(function(){
                that.getCacheData(node,resolve)
            },100);
        }
    },
    //第三次掉接口数据
    async getpbocbdmsReportListTargetsdata(node, resolve) {
      let TargetsdataList = []
      const that = this
      const res = await pbocbdmsReportListTargets({tableName: node.data.tableName})
      if (res.code == 200) {
        res.data.map(function (value) {
          let json3 = {
            excelName: '',
            targetCode: '',
            hasXm: node.data.hasXm,
            tableName0: node.data.tableName,
            excelName1: node.data.excelName,  // 1
            xmCode: node.data.xmCode, //2
            id: `${node.data.tableName}${node.data.xmCode}${value.targetCode}`,
            twoParendId: `${node.data.tableName}${node.data.xmCode}`,
            oneParendId: node.data.tableName,
            leaf: true
          }
          json3['excelName'] = value.targetName
          json3['targetCode'] = value.targetCode//3
          TargetsdataList.push(json3)
        })
        const map = that.targetDataMap;
        map[node.data.tableName] = TargetsdataList;
        this.isLoading = false
        resolve(TargetsdataList)
      }else{
        this.isLoading = false
      }
    },
//获取树节点
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getpbocbdmsreport(resolve)
      }
      if (node.level === 1) {
        if (node.data.hasXm) {
          this.getpbocbdmsReportListXms(node, resolve)
        } else {
          this.getpbocbdmsReportListTargets(node, resolve)
        }
      }
      if (node.level === 2) {
        this.getpbocbdmsReportListTargets(node, resolve)
      }
    },
    handleCheckChange(nodeData, nodeSelected) {
      let tree = this.$refs.tree;
      let node = tree.getNode(nodeData.id)
      //展开选中的未展开的节点
      this.expandCheckedNotExpandNodes(node);

      //具体业务实现
      console.log(nodeData, nodeSelected)
    },
    //展开选中的未展开的节点
    expandCheckedNotExpandNodes(node) {
      let tree = this.$refs.tree;
      if (node.checked && !node.expanded && !node.isLeaf) {
        node.expand(function () {
          let childNodes = node.childNodes;
          for (let i = 0; i < childNodes.length; i++) {
            let childNode = childNodes[i];
            //手动触发check-change事件，事件处理函数中回继续调用此函数，形成递归展开
            tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
          }
        })
      }
    },
    //展开匹配的结点，根结点默认展开
    expandNodes(nodeDataIds,callback){

        let tree = this.$refs.tree;
        let rootNode = tree.root;
        this.expandNode(rootNode, nodeDataIds, callback);
    },
    //展开指定结点下匹配的结点
    expandNode(node, nodeDataIds, callback){
        let that = this;
        //递归进入
        that.recursiveEnter();

        //当前结点需要展开未展开，则展开(根结点默认展开)
        if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
           //展开孩子结点
           let expandChildren = function(){
               let childNodes = node.childNodes;
               if(childNodes.length > 0){
                   for (let i = 0; i < childNodes.length; i++) {
                      let childNode = childNodes[i];
                      //递归展开孩子结点
                      that.expandNode(childNode, nodeDataIds, callback);
                   }
               }
           }
           if(!node.expanded){
               //当前结点未展开则先展开，展开后再展开孩子结点
               node.expand(function(){
                    //展开孩子结点
                    expandChildren();

                    //递归退出
                    that.recursiveExit(callback);
               });
           }else{
                //当前结点已展开，直接展开孩子结点
                expandChildren();

                //递归退出
                that.recursiveExit(callback);
           }
        }else{
            //递归退出
            that.recursiveExit(callback);
        }
    },
    //递归计入计数剩余递归次数
    recursiveEnter(){
        this.recursiveRemainCount++;
        console.log('enter recursiveRemainCount', this.recursiveRemainCount)
    },
    //递归退出计数剩余递归次数
    recursiveExit(callback){
       this.recursiveRemainCount--;
       console.log('exit recursiveRemainCount', this.recursiveRemainCount)
       if(this.recursiveRemainCount==0){
         if(callback){
            callback();
         }
       }
    },
    checkNodes(nodeDataIds){
         let tree = this.$refs.tree;
         tree.setCheckedKeys(nodeDataIds, false)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.excelName.indexOf(value) !== -1;
    },
  },
  created() {
  }
}
</script>

<style scoped>

</style>