vue 使用ztree

1 全局引入jquery , 不明白的看我上一个的随笔 , 特别简单

2 我没有封装组件 , 项目里面这个效果的只用了一次 , 没有必要

在你的<script>标签下面引入这俩东西 , 前提你要保证你node_models 文件夹里面已经install这个了 , package.json文件里面也有这个依赖
import "ztree/css/zTreeStyle/zTreeStyle.css"
import "ztree/js/jquery.ztree.all"

3 引入这两个文件以后就可以正常使用了 , 只是使用方法不能像写jquery那样的了

1. 接下来基本按照ztree的示例来写就没问题

   data(){
     return {
           zNodes:[
           { id:1, pId:0, name:"普通的父节点", t:"我很普通，随便点我吧", open:true},
           { id:11, pId:1, name:"叶子节点 - 1", t:"我很普通，随便点我吧"},
           { id:12, pId:1, name:"叶子节点 - 2", t:"我很普通，随便点我吧"},
           { id:13, pId:1, name:"叶子节点 - 3", t:"我很普通，随便点我吧"},
           { id:2, pId:0, name:"NB的父节点", t:"点我可以，但是不能点我的子节点，有本事点一个你试试看？", open:true},
           { id:21, pId:2, name:"叶子节点2 - 1", t:"你哪个单位的？敢随便点我？小心点儿..", click:false},
           { id:22, pId:2, name:"叶子节点2 - 2", t:"我有老爸罩着呢，点击我的小心点儿..", click:false},
           { id:23, pId:2, name:"叶子节点2 - 3", t:"好歹我也是个领导，别普通群众就来点击我..", click:false},
           { id:3, pId:0, name:"郁闷的父节点", t:"别点我，我好害怕...我的子节点随便点吧...", open:true, click:false },
           { id:31, pId:3, name:"叶子节点3 - 1", t:"唉，随便点我吧"},
           { id:32, pId:3, name:"叶子节点3 - 2", t:"唉，随便点我吧"},
           { id:33, pId:3, name:"叶子节点3 - 3", t:"唉，随便点我吧"}
         ],
         setting:{
                 data: {
             key: {
               title:"t",
               name:'deptName',
             },
             simpleData: {
               enable: true
             }
           },
           callback: {
             // beforeClick: this.beforeClick,
             // onClick: this.onClick
             onRightClick: this.OnRightClick
           }
         },
       }  
   }
   
   
   

   然后

   1. methods: {
          OnRightClick(a,b,c){
            console.log(a)
            console.log(b)
            console.log(c)
          },
          ztreeInit(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.treeList);
          }
        },
        mounted() {
      　　this.ztreeInit(); 
      
      }

      这样效果就出来了

   2. 基本上其他多余的代码基本上就不贴了 , 然后就是右击写业务上的需求了 , 大体就这么个意思

转载于:https://www.cnblogs.com/sunjinggege/p/9407068.html