Vue中使用z-tree插件 —— 点击展开事件异步加载子节点

3 篇文章 0 订阅

在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);
        }
    }
在Ant Design VueTree组件,您可以使用异步加载数据来实现选节点展开子节点的功能。以下是实现该功能的步骤: 1. 定义Tree节点的数据源,包括节点的id、名称、父节点id等属性。 2. 在Tree组件设置show-expand属性为true,这将显示展开和折叠图标。 3. 设置Tree组件的load-data属性,指定异步加载数据的方法,该方法将根据父节点id加载子节点数据。 4. 在Tree组件的节点模板使用 @click.native 事件监听节点点击事件,并在事件处理程序判断当前节点是否有子节点,如果有则展开,否则不展开。 下面是一个示例代码,用于实现选节点展开子节点的功能: ```html <template> <a-tree :show-expand="true" :load-data="loadData" :tree-data="treeData" > <template slot-scope="{ data }"> <span :class="{'tree-node-disabled': data.disabled}" @click.native="handleClick(data)" > {{ data.title }} </span> </template> </a-tree> </template> <script> export default { data() { return { treeData: [], }; }, mounted() { this.loadData(null, (data) => { this.treeData = data; }); }, methods: { loadData(parent, callback) { // 根据父节点id加载子节点数据 // ... }, handleClick(node) { // 判断当前节点是否有子节点 if (node.children && node.children.length > 0) { // 展开子节点 node.expanded = !node.expanded; } }, }, }; </script> ``` 在上面的示例代码,loadData方法用于异步加载节点数据,handleClick方法用于处理节点点击事件。当用户单击节点时,如果该节点子节点,则会展开子节点,否则不会展开。请按照您的实际需求进行修改。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值