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精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
jquery 插件开发备注
2010/08/27 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript 动态创建表格
2015/01/08 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
初学python数组的处理代码
2011/01/04 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
学习两会精神心得范文
2014/03/17 职场文书
环保倡议书300字
2014/05/15 职场文书
工程售后服务方案
2014/06/08 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript