首页 > web前端 > js教程 > 在vue中如何使用ztree(详细教程)

在vue中如何使用ztree(详细教程)

亚连
发布: 2018-06-07 14:25:56
原创
6094 人浏览过

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

以上是在vue中如何使用ztree(详细教程)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板