vue中如何使用ztree
更新時間：2018年02月06日 14:36:34 作者：OSC屠夫
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下
下面給大家介紹vue ztree 結(jié)合使用方法，一起看看吧！
配置package.json
打包下載jquery以及ztree
"dependencies": {
"element-ui": "^2.1.0",
"vue": "^2.5.2",
"axios": "^0.16.1",
"jquery":"3.3.1",
"vue-awesome":"2.3.4",
"ztree":"3.5.24"
},
自動加載jquery
項目build的時候自動加載jquery，并且輸出到j(luò)Query中，在ztree中會使用到j(luò)Query。
plugins: [
new webpack.ProvidePlugin({
jQuery:'jquery',
$:'jquery',
})
]
import jquery以及ztree
import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css'
調(diào)用ztree生成樹形結(jié)構(gòu)
export default {
data() {
return {
nodeData: [{
name: "父節(jié)點1", children: [
{name: "子節(jié)點1"},
{name: "子節(jié)點2"}
]
}],
setting:{
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: this.getFileDesc
}
}
}
},
mounted(){
let nodeData = this.nodeData
$.fn.zTree.init($("#uploadtree"), this.setting, nodeData);
}
}
總結(jié)
以上所述是小編給大家介紹的vue中如何使用ztree，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文給大家介紹基于 Vue 實現(xiàn)一個酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
解決elementui中NavMenu導(dǎo)航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導(dǎo)航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue2實現(xiàn)未登錄攔截頁面功能的基本步驟和示例代碼
在Vue 2中實現(xiàn)未登錄攔截頁面功能,通?？梢酝ㄟ^路由守衛(wèi)和全局前置守衛(wèi)來完成,以下是一個基本的實現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個簡單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)二級彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用Vue3+Vant組件實現(xiàn)App搜索歷史記錄功能(示例代碼)
最近接了個項目需要開發(fā)一個app項目，由于是第一次接觸這種app開發(fā)，經(jīng)過一番思考，決定使用Vue3+Vant前端組件的模式進行開發(fā)，下面把問題分析及實現(xiàn)代碼分享給大家，需要的朋友參考下吧2021-06-06
watch函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽使用的相關(guān)資料,需要的朋友可以參考下2022-06-06