vue中使用zTree插件實現(xiàn)文件多選
原文鏈接：https://fe32.top/articles/zt1442re/
前言
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。專門適合項目開發(fā),尤其是 樹狀菜單、樹狀數(shù)據(jù)。
優(yōu)點如下：
zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
采用了 延遲加載 技術(shù)，上萬節(jié)點輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數(shù)據(jù)
支持靜態(tài) 和 Ajax 異步加載節(jié)點數(shù)據(jù)
支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應(yīng)回調(diào)
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點，還可以多節(jié)點拖拽喲
在一個頁面內(nèi)可同時生成多個 Tree 實例
簡單的參數(shù)配置實現(xiàn) 靈活多變的功能
傳送門：ztree官方文檔
效果
單選
多選
步驟
安裝Jquery依賴。 先安裝 JQ 依賴（
npm install jquery --save-dev）。 然后在配置文件vue.config.js中的configureWebpack寫下如下代碼。JavaScript
? ?configureWebpack: { ? ? ? ?plugins: [ ? ? ? ? ? ?new webpack.ProvidePlugin({ ? ? ? ? ? ? ? ?$: "jquery", ? ? ? ? ? ? ? ?jQuery: "jquery", ? ? ? ? ? ? ? ?"windows.jQuery": "jquery" ? ? ? ? ? ?}) ? ? ? ?] ? ?},
下載
zTree插件（含 Css 和 Js）。下載ztree:?https://wws.lanzoui.com/iWoXIp28pni
引入
zTree插件先看下我的目錄結(jié)構(gòu)，每個人的風(fēng)格可能千差萬別（plugins 可以改成任何名字，不過一般插件類的我習(xí)慣命名為plugins）。
3. 在入口文件main.js中引入 css 和 js。
JavaScript
import "@/plugins/ztree/js/jquery-3.2.1.min";import "@/plugins/ztree/js/jquery.ztree.core.js";import "@/plugins/ztree/js/jquery.ztree.excheck";import "@/plugins/ztree/css/zTreeStyle/zTreeStyle.css";
4. 代碼過多，這里展示部分重要代碼，如果需要請自行下載下面壓縮文件（需要對Vue有一定的了解）。
HTML中聲明ID為
targetDom的盒子（目標(biāo)盒子，我這里的targetDom命名為treeCreate）?
zTree主要配置?
將資源樹渲染在目標(biāo)盒子中?
一些主要方法?
源文件代碼（可能比較復(fù)雜）
下載vue文件
注意：這里放了兩個重要文件，父組件?
index.vue?，子組件為?newStrategy.vue，文件資源加載是通過接口返回后再掛載資源樹上，最主要的方法是?zTreeOnCheck()?和?zTreeOnClick()。
建議
建先看下官方提供的 Demo 和 Api文檔 ，這樣有助于更好地理解 zTree 的使用。
傳送門：[ Demo 演示 ](http://www.treejs.cn/v3/demo.php#_101)
傳送門：[ Api 文檔 ](http://www.treejs.cn/v3/api.php)
遇到問題
如果在閱讀過程中遇到什么問題 ，請在?留言板(https://fe32.top/comments/)?留言 ，我會在第一時間內(nèi)幫助您解決問題 。
