在vue中使用ztree樹插件

插件資源及api：樹官網

本事例是在vue3.0+中演示，事例是實際項目中正在用的組件所以部分打了馬賽克。

1、插件准備（提前准備好插件文件）

可以直接在官網下載，搭建好腳手架后將准備好的文件放在libs文件夾（也可以放在自己資源的文件夾）

2、下載jQuery依賴

npm install jquery --save-dev

3、在組件中引入相關依賴和文件

4、開始，先寫標簽部分

<template>
  <div>
    <ul id="treeDemo" class="ztree" @select="zTreeOnClick"></ul>
  </div>
</template>

官網demo是

<ul id="treeDemo" class="ztree"></ul>

我加的@select="zTreeOnClick"是樹的點擊事件 點擊事件配置下面就是

5、配置

配置都是寫在data（）里的，setting就是樹的配置，我們一共寫了三個配置：treeId是定義樹的id的屬性值，name是節點數據保存節點名稱的屬性名稱，onClick就是樹的點擊事件。zNodes就是樹的節點數據。

我只截一部分，大致就是這樣一個數據格式。iconSkin是樹的自定義圖標，后面會說。

6、樹的初始化，創建樹

我是寫在mounted（）里的，init（）就是樹初始化方法里面有三個參數，第一個ztree樹的容器，第二個樹配置，第三個樹的節點數據，expandAll（）方法是樹節點的展開/折疊。

mounted(){
    $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
},

7、至此我們就可以看到我們的樹了

  

 8、報錯解決

部分人在上面代碼完全一致的時候會打開頁面樹並沒有顯示而是如圖報錯了

也有報 $ is not defined 的其實兩個錯誤都是一個意思解決方法需要我們配置一下：

vue3.0+的腳手架目錄中的配置文件vue.config.js文件，加上紅框內的配置即可。

 9、最后就是自定義圖標了

我們在第五部配置的時候在節點數據中加入了iconSkin來設置自定義圖片。

/deep/ .ztree li span.button.key0_ico_close{
    background: url(../../assets/img/treeicon00.png) no-repeat center;
    background-size: 100% 100%;
} 
/deep/ .ztree li span.button.key0_ico_open{
    background: url(../../assets/img/treeicon01.png) no-repeat center;
    background-size: 90% 90%;
} 
/deep/ .ztree li span.button.key1_ico_docu{
    background: url(../../assets/img/treeicon1.png) no-repeat center;
    background-size: 90% 90%;
}

/deep/ 是代表樣式僅在本文件中起效

.ztree li span.button 是固定的不加的話可能找不到

.key0 是我們iconSkin的名字

_ico_close 節點折疊時的圖標

_ico_open 節點展開時的圖標

_ico_docu 圖標一致時用docu

如圖我們箭頭標記的地方用的是折疊展開兩種圖標剩下的圖標都是固定的

10、點擊事件

methods: {
    zTreeOnClick(event, treeId, treeNode) {
      console.log(treeNode);
    }
}

點擊場地場所時：