在vue中使用z-tree插件，执行异步加载时候，API文档提示必须写上。
async: {
		enable: true,
		url: "nodes.php",
		autoParam: ["id", "name"]
	}

琢磨了好久，写出来的。

首先，要弄清楚这两个事件的方法：

1、节点展开（点击前面那个‘+’号或双击节点）

onExpand:节点展开的事件回调函数

2、节点展开（点击前面那个‘-’号或双击节点）

onCollapse:节点折叠的事件回调函数
 callback:{
            
            beforeCollapse: beforeCollapse,                //用于捕获父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作
            //返回值是 true / false
            //如果返回 false，zTree 将不会折叠节点，也无法触发 onCollapse 事件回调函数
            beforeExpand: beforeExpand,                   //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
            //返回值是 true / false
            //如果返回 false，zTree 将不会展开节点，也无法触发 onExpand 事件回调函数
            onCollapse: onCollapse,                      //用于捕获节点被折叠的事件回调函数
            onExpand: onExpand                      //用于捕获节点被展开的事件回调函数
        }

下面附上代码：

HTML:
    <template>
        <div>
            <div class="question_info_lists">
                <div class="tree-box">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div> </template>

JS部分：
export default {
        name: "zTree",
        data(){
            return{
                key:false,
                setting: {
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0,
                        }
                    },
                    view: {
                        showLine: false,
                        dblClickExpand: false,
                        addDiyDom: this.addDiyDom,
                        nameIsHTML: true,
                        selectedMulti: false
                    },
                    callback: {
                        onClick: this.onClick,                //节点点击事件
                        onCollapse:this.onCollapse,           //点击图标按钮节点 折叠后 异步加载子数据
                        onExpand:this.zTreeOnAsyncSuccess    //点击图标按钮节点 展开后 异步加载子数据
                    }
                },
                zNodes:[]
            }
        },
        methods:{
            //获取菜单
            async freshArea(){
                const param ={}
                const result = await resTagTreeData(param)
                if(result.code==='200000'){
                    this.zNodes = result.data.ztreeList
                    //判断是否有子节点--通过isContainSon是否大于0（也就是有终端）,添加父节点为true
                    this.zNodes.forEach((item)=>{
                        if(item.isContainSon === 1){
                            item.isParent = true;
                        }
                    })
                    //数据渲染到菜单
                    $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
                }else {
                    alert(result.message)
                }
            },
            //点击节点
            onClick(event, treeId, treeNode) {
                alert(treeNode.Name + ", " + treeNode.name);
            },
            zTreeOnAsyncSuccess(event, treeId, treeNode) {
                this.addNodes(treeNode);
            },
            //点击展开图标 --加载子菜单
           async addNodes(treeNode){
                //this.key=false
                const param = {
                    "id":treeNode.id,
                    'labelType':treeNode.labelType
                };
               // console.log(param)
                const treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
                const childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
               //点击事件后将子节点清空后在进行拼接
               treeNode.children = [];
               //因为子节点还包括组织，所以这里需要筛选一下
               if(treeNode.isParent){
                   const result = await resChildrentreeData(param)
                   if(result.code==='200000'){
                       const childrenData=eval(result.data.ztreeList)
                      // console.log(childrenData)
                       //判断子节点是否包含子元素
                       for(var i in childrenData){
                           if(childrenData[i].isContainSon === 1){
                               childrenData[i].isParent = true;
                           }
                       };
                       //console.log(childrenData)
                       treeObj.refresh();
                       treeObj.addNodes(parentZNode,childrenData, false);    //添加节点
                       //this.key = true
                   }else {
                       alert(reslut.mes)
                   }
               }
           }
        },
        mounted(){
            this.freshArea()
           //$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        }
    }

html
<el-form-item label="门店：" :label-width="formLabelWidth">
    <el-tree
            :props="props"
            :load="loadNode"
            node-key="id"
            ref="tree"
            highlight-current
            lazy
            show-checkbox
            @node-click="handleNodeClick"
            expand-on-click-node
    ></el-tree>
</el-form-item>

js
data() {
  return {
	props: {
	    label: "regionName",//这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
	    children: [],
	    isLeaf: "leaf"},
		}
},
methods: {
	        handleNodeClick(data) {
                console.log("node", data);
            },
            // 异步树叶子节点懒加载逻辑
            loadNode(node, resolve) {
                // 一级节点处理
                if (node.level === 0) {
                    this.requestTree(resolve);
                }
                // 其余节点处理
                if (node.level === 1 || node.level === 2) {
                    // 注意！把resolve传到你自己的异步中去
                    this.getIndex(node, resolve);
                }
				//该级为获取门店为业务逻辑，获取省市区不需要
                if (node.level === 3) {
                    this.getIndexStore(node, resolve);
                }
            },
            // 首次加载一级节点数据函数
            requestTree(resolve) {
                getFirstRegion().then(res => {
                    if (res.code === 200) {
                        let data = res.data;
                        resolve(data);
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch(error => {
                });
            },
            // 异步加载叶子节点数据函数
            getIndex(node, resolve) {
                getSecondRegion(node.data.id).then(res => {
                    if (res.code === 200) {
                        let data = res.data;
                        resolve(data);
                    } else {
                        this.$message.error(res.message);
                    }

                })
            },
            getIndexStore(node, resolve) {
                getStoreRegionList({customerId: this.customerId, regionId: node.data.id}).then(res => {
                    if (res.code === 200) {
                        let data = [];
                        res.data.map(v => {
                            let obj = {};
                            obj.regionName = v.storeName;
                            obj.id = v.id;
                            obj.leaf = true;
                            data.push(obj);
                        });
                        resolve(data);
                    } else {
                        this.$message.error(res.message);
                    }
                })
            },
            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
}

<Tree v-show="curType=='archive'"  :data="archiveTree" :load-data="loadData" @on-select-change="selectChange" :show-check="false"> </Tree>
data () {
    return {
      archiveTree:[],树的集合
      id:-1,//根节点
      }}
mounted() {//生命周期函数，页面刷新时调用此方法初始化树
       this._loadData(this.id,(array) =>{
           this.archiveTree=array
       })
     },
      methods: { 
     loadData (item, callback) {//异步加载的方法 
       this._loadData(item.id,callback)
       },
       _loadData(code,callback){ //发送请求并且对后台的数据进行处理
         this.$axios.get('/api/cate/SelectNode?pcode='+code).then((res)=>{
           const array=[] //创建一个数组
           console.log(res.data)
           for(let i=0;i<res.data.length;i++){
             let item=res.data[i]  
             array.push(item={id:item.id,title:item.title,loading:false,children:[],source:item})//将返回值赋值给新数组在这里可以给json对象添加属性
             if(item.source.leaf) delete item.loading
          }
          callback(array) /返回新数组
         })
       },
       selectChange(selectedList){
         //获取当前点击的节点
         const node = selectedList[selectedList.length - 1]
        this.$axios.post('/api/cate/SelectTrss',
               this.qs.stringify({
                   id: node.id                
                }))
               .then(res => {
                  const  list=[]
                  for(let i=0;i<res.data.length;i++){
                    let items=res.data[i]
                    list.push(items={title:items.name,type:'text'})
                  }
                   console.log(list)
                 this.fields= list;
              })
         if(node){
           this._loadData(node.id,(res)=>{
             if(!res)return //没有子节点则返回
             let array=[]
             res.forEarch(item => {//遍历子节点然后在各子节点上递归调用请求下一层后代
             array.push(item)
             this._loadData(item.id,()=>{              
             })
             node.children=array //挂载子节点
             node.expand=true    //展开子节点
             })
           })
         }
       },

element-ui异步加载行政区划树
功能：进入页面，左侧显示行政区划树的顶级目录，单击目录左侧的箭头，则向后端发送请求，获得该级目录的子目录；以此类推；点击目录本身，则向后端发请求和右边的列表进行联动；

首先说后台返回的数据构成：ａｊａｘ的列表
	id-uuid label-名称 ztreeType-（0显示行政区划下的子区划，1显示行政区划下的部门） hasChild-是否有子节点

前端树代码：
	<el-tree
		:props="defaultProps"  //这个很重要，element-ui的树自带node属性，这个属性要和后端返回的数据映射
		:expand-on-click-node="false"
		:filter-node-method="filterNode"
		:default-expand-all="false"
		ref="tree"
		lazy
		:load="loadNode"
		node-key="id"
		highlight-current
		@node-click="handleNodeClick"
	>
	</el-tree> 
属性：
	defaultProps:{
		children:[],
		label:'label',
		id:'id',
		isLeaf:'hasChild'
	},

方法：
//筛选节点
	filterNode(value,data){
		if(!value) return true;
		return data.label.indexOf(value)!==-1;
	}
//节点单击事件
	handleNodeClick(data){
		this.queryParams.deptId = data.id;
		getList();
	}
//异步树叶子节点懒加载逻辑
	loadNode(node,resolve){
		//此方法是进入页面后自动运行的,两个参数也是默认加载的
		//一级节点处理
		if(node.level==0){
			this.requestTree(resolve);
		}
		//其余节点处理
		if(node.level>=1){
			this.getIndex(node,resolve);
		}
	},
//首次加载一级节点数据函数
	requestTree(resolve){
		regionTree({regionCode:370000}).then(response=>{
			response.data.forEach(item=>{
				if(item.hasChild=='true'){
					item.hasChild = false
				}else{
					item.hasChild = true
				}
			})
			resolve(response.data)
		}).catch(err=>{})
	},
//异步加载叶子节点函数
getIndex(node,resolve){
	regionTree({regionCode:node.key}).then(res=>{
		res.data.forEach(item=>{
			if(item.hasChild=='true'){
				item.hasChild = false
			}else{
				item.hasChild = true
			}
		})
		resolve(res.data);
	}).catch(err=>{})
},