在vue中使用ztree

首先，在vue项目的main.js中引入以下几个文件：

import "../../plugins/ztree/js/jquery.ztree.core.min.js"
import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"
import '../../plugins/ztree/css/zTreeStyle.css

页面详细代码如下：

<template>
    <div id="areaTree">
        <div class="box-title">
            <a href="#">列表<i class="fa  fa-refresh" @click="freshArea">点击</i></a>
        </div>
        <div class="tree-box">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</template>


<script>
  // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
  //import "../../plugins/jquery.3.2.1.js"
  //import "../../plugins/ztree/js/jquery.ztree.core.min.js"
  //import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"
    export default {
      name: 'areaTree',
      components:{
 
      },
      data:function(){
        return{
            setting:{
              check: {  
                    enable: true,  
                    nocheckInherit: false ,
                    chkboxType: { "Y": "p", "N": "s" } 
                },  
                data: {  
                    simpleData: {  
                        enable: true  
                    }  
                },
                callback: {
                    beforeClick: this.beforeClick,
                    onClick: this.zTreeOnClick,
                    onCheck: this.zTreeOnCheck,
                }
            },
            zNodes:[
              { id:1,pid:0,name:"大良造菜单",open:true,nocheck:false,
                children: [
                    { id:11,pid:1,name:"当前项目"},
                    { id:12,pid:1,name:"工程管理",open:true,
                        children: [
                            { id:121,pid:12,name:"我的工程"},
                            { id:122,pid:12,name:"施工调度"},
                            { id:1211,pid:12,name:"材料竞价"}
                        ]
                    },
                    { id:13,pid:1,name:"录入管理",open:true,
                        children: [
                            { id:131,pid:13,name:"用工录入"},
                            { id:132,pid:13,name:"商家录入"},
                            { id:1314,pid:13,name:"机构列表"}
                        ]
                    },
                    { id:14,pid:1,name:"审核管理",open:true,
                        children: [
                            { id:141,pid:14,name:"用工审核"},
                            { id:142,pid:14,name:"商家审核"},
                            { id:145,pid:14,name:"机构审核"}
                        ]
                    },
                    { id:15,pid:1,name:"公司管理",open:true,
                        children: [
                            { id:1517,pid:15,name:"我的工程案例"},
                            { id:1518,pid:15,name:"联系人设置"},
                            { id:1519,pid:15,name:"广告设置"}
                        ]
                    },
                    { id:16,pid:1,name:"业务管理",open:true,
                        children: [
                            { id:164,pid:16,name:"合同范本"},
                            { id:165,pid:16,name:"合同列表"},
                            { id:166,pid:16,name:"需求调度"}
                        ]
                    },
                    { id:17,pid:1,name:"订单管理",open:true,
                        children: [
                            { id:171,pid:17,name:"商品订单"},
                            { id:172,pid:17,name:"用工订单"},
                            { id:175,pid:17,name:"供应菜单"}
                        ]
                    },
                    { id:18,pid:1,name:"我的功能",open:true,
                        children: [
                            { id:181,pid:18,name:"免费设计"},
                            { id:182,pid:18,name:"装修报价"},
                            { id:1817,pid:18,name:"项目用工"}
                        ]
                    },
                    { id:19,pid:1,name:"分润管理",open:true,
                        children: [
                            { id:191,pid:19,name:"分润列表"}
                        ]
                    },
                    { id:110,pid:1,name:"运营管理",open:true,
                        children: [
                            { id:1101,pid:110,name:"代理列表"},
                            { id:1102,pid:110,name:"代售商品"}
                        ]
                    },
                ]
              }
            ]        
        }
      },
      methods:{
        freshArea: function(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        },
        zTreeOnClick: function(event, treeId, treeNode) {
            console.log(treeNode.tId + ", " + treeNode.name);
        },
        zTreeOnCheck: function(event, treeId, treeNode) {
            console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            checkCount = zTree.getCheckedNodes(true).length,//选中
            nocheckCount = zTree.getCheckedNodes(false).length,//未选中
            changeCount = zTree.getChangeCheckedNodes().length;//获取输入框勾选状态被改变的节点集合（与原始数据 checkedOld 对比）
            var checkedNames = [],checkedIds = [];
            for (var i = 0; i <= zTree.getCheckedNodes(true).length - 1; i++) {
                checkedIds.push(zTree.getCheckedNodes(true)[i].id);
                checkedNames.push(zTree.getCheckedNodes(true)[i].name);
            };
            console.log(checkedIds);
            console.log(checkedNames);
        },
        beforeClick: function(treeId, treeNode) {
          var zTree = $.fn.zTree.getZTreeObj("treeDemo");
          // zTree.checkNode(treeNode, !treeNode.checked, null, true);
          zTree.checkNode(treeNode, !treeNode.checked, true, true); //第二个参数!treeNode.checked和"",省略此参数效果等同，则根据对此节点的勾选状态进行 toggle 切换，第三个参数设置为true时候进行父子节点的勾选联动操作 ，第四个参数true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数；false 表示执行此方法时不触发事件回调函数
          return false;
        }
      },
      mounted(){
        $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
      }
    }
</script>
<style>
    /*@import '../../plugins/ztree/css/zTreeStyle.css';*/
    #areaTree{
        border:1px solid #e5e5e5;    margin-bottom: 2px;border-radius: 4px;overflow: hidden;
    }
    .box-title{
            border-radius: 3px 3px 0 0;background-color: #f5f5f5;
    }
    .box-title a{
            color: #2fa4e7;
             text-decoration: none;font-size:14px;    display: block;
    padding: 8px 15px;cursor: pointer;
    }
    .box-title .fa{
        float:right;line-height: 20px;
    }
</style>
<style>
    /*@import '../../plugins/ztree/css/zTreeStyle.css';*/
    #areaTree{
        border:1px solid #e5e5e5;    margin-bottom: 2px;border-radius: 4px;overflow: hidden;
    }
    .box-title{
            border-radius: 3px 3px 0 0;background-color: #f5f5f5;
    }
    .box-title a{
            color: #2fa4e7;
             text-decoration: none;font-size:14px;    display: block;
    padding: 8px 15px;cursor: pointer;
    }
    .box-title .fa{
        float:right;line-height: 20px;
    }
</style>

　　效果如图所示：

 

转载于:https://www.cnblogs.com/5588kjx/p/10400705.html