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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
javascript表格的渲染组件
Jul 03 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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的优点与缺点
2013/04/11 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python笔试面试题小结
2019/09/07 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Django通过json格式收集主机信息
2020/05/29 Python
通过cmd进入python的步骤
2020/06/16 Python
竞聘自述材料
2014/08/25 职场文书
2014年消防工作总结
2014/11/21 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
python元组打包和解包过程详解
2021/08/02 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
搭建Yolov5服务器
2022/04/30 Servers