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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
常用的js方法合集
Mar 10 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue的keep-alive用法技巧
Aug 15 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
详解Swift中属性的声明与作用
2016/06/30 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python程序运行原理图文解析
2018/02/10 Python
python图书管理系统
2020/04/05 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python如何省略括号方法详解
2020/03/21 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
linux下进程间通信的方式
2014/12/23 面试题
总务岗位职责
2013/11/19 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers