vue中如何使用ztree

更新時(shí)間：2018年02月06日 14:36:34 作者：OSC屠夫

這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動(dòng)加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

下面給大家介紹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"
 },

自動(dòng)加載jquery

項(xiàng)目build的時(shí)候自動(dòng)加載jquery，并且輸出到j(luò)Query中，在ztree中會(huì)使用到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生成樹(shù)形結(jié)構(gòu)

export default {
  data() {
   return {
    nodeData: [{
     name: "父節(jié)點(diǎn)1", children: [
      {name: "子節(jié)點(diǎn)1"},
      {name: "子節(jié)點(diǎn)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，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue
ztree

相關(guān)文章

vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決
這篇文章主要介紹了vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法
這篇文章主要介紹了vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
vue開(kāi)發(fā)公共組件之返回頂部
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue中button標(biāo)簽樣式和功能禁用的寫法
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化
本文主要介紹了element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色
這篇文章主要為大家詳細(xì)介紹了vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色，非常實(shí)用的切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue.js仿微信聊天窗口展示組件功能
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下
2017-08-08
Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒(méi)報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問(wèn)題,具體細(xì)節(jié)問(wèn)題參考下本文詳細(xì)講解
2024-02-02
基于Vue封裝實(shí)現(xiàn)全屏功能工具類
在?Web?應(yīng)用程序中,有時(shí)需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個(gè)全屏功能的工具類,希望對(duì)大家有所幫助
2024-03-03
Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作,本文給大家介紹Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧
2023-12-12