这篇文章主要介绍了vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下

下面给大家介绍vue ztree 结合使用方法，一起看看吧！

配置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，并且输出到jQuery中，在ztree中会使用到jQuery。

plugins: [  new webpack.ProvidePlugin({   jQuery:'jquery',   $:'jquery',  }) ]

import jquery以及ztree

import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css'

调用ztree生成树形结构

export default {  data() {   return {    nodeData: [{     name: "父节点1", children: [      {name: "子节点1"},      {name: "子节点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);  } }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用JS获得节点元素的方法

在vue.js中有关vue-fontawesome使用

使用JS添加元素新节点