在vue中如何使用ztree（详细教程）

来源：动视网责编：小采时间：2020-11-27 19:39:52

在vue中如何使用ztree（详细教程）

在vue中如何使用ztree（详细教程）:这篇文章主要介绍了vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下下面给大家介绍vue ztree 结合使用方法，一起看看吧！配置package.json打包下载jquer

推荐度：

点击下载本文 文档为doc格式

导读在vue中如何使用ztree（详细教程）:这篇文章主要介绍了vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下下面给大家介绍vue ztree 结合使用方法，一起看看吧！配置package.json打包下载jquer

这篇文章主要介绍了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添加元素新节点