快捷導(dǎo)航

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生成樹形結(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)文章

Vue 中使用vue2-highcharts實(shí)現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實(shí)現(xiàn)top功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2017-11-11
Element PageHeader頁(yè)頭的使用方法
這篇文章主要介紹了Element PageHeader頁(yè)頭的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
解決elementui中NavMenu導(dǎo)航菜單高亮問(wèn)題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導(dǎo)航菜單高亮問(wèn)題(解決多種情況)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通?？梢酝ㄟ^(guò)路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下
2024-04-04
vue事件修飾符和按鍵修飾符用法總結(jié)
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
vue實(shí)現(xiàn)二級(jí)彈框案例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能(示例代碼)
最近接了個(gè)項(xiàng)目需要開(kāi)發(fā)一個(gè)app項(xiàng)目，由于是第一次接觸這種app開(kāi)發(fā)，經(jīng)過(guò)一番思考，決定使用Vue3+Vant前端組件的模式進(jìn)行開(kāi)發(fā)，下面把問(wèn)題分析及實(shí)現(xiàn)代碼分享給大家，需要的朋友參考下吧
2021-06-06
VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解
watch函數(shù)用來(lái)偵聽(tīng)特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽(tīng)使用的相關(guān)資料,需要的朋友可以參考下
2022-06-06