vue中如何使用ztree


Posted in Javascript onFebruary 06, 2018

下面给大家介绍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);
  }
 }

总结

以上所述是小编给大家介绍的vue中如何使用ztree,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
javascript回调函数详解
Feb 06 #Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
20行JS代码实现粘贴板复制功能
Feb 06 #Javascript
JS中offset和匀速动画详解
Feb 06 #Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 #Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
详解vue移动端日期选择组件
2018/02/22 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
深入学习python多线程与GIL
2019/08/26 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
构造器Constructor是否可被override?
2013/08/06 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
需求分析说明书
2014/05/09 职场文书
大学生十八大感想
2015/08/11 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Python OpenCV 图像平移的实现示例
2021/06/04 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript