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. 基本上其他多余的代碼基本上就不貼了 , 然后就是右擊寫業務上的需求了 , 大體就這么個意思