vue自定义树状结构图的实现方法


Posted in Javascript onOctober 18, 2020

vue 实现自定义树状结构图

  • 可动态添加、删除
  • 可整体拖拽
  • 如需内容也为动态,把组件内容使用input、select等组件替换
  • 数据结构
treeData: [{
  name: '1',
  child: [
   { name: '2',
   child: [{ name: '1' }, { name: '2' }]
   },
   { name: '1',
   child: [{ name: '1' }, { name: '2' }]
   }
  ]
 }]

vue自定义树状结构图的实现方法

思路:

1、先写好一个公共的组件TreeItem

vue自定义树状结构图的实现方法

vue自定义树状结构图的实现方法

2、加上条件判断

vue自定义树状结构图的实现方法

3、然后递归调用自身组件

vue自定义树状结构图的实现方法

4、最后直接调用组件就完成了

vue自定义树状结构图的实现方法

gitHub地址链接 https://github.com/hellozdq/customTree

总结

到此这篇关于vue自定义树状结构图实现的文章就介绍到这了,更多相关vue自定义树状结构图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
js取得url地址参数实例
Feb 22 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
axios封装与传参示例详解
Oct 18 #Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 #Javascript
js中复选框的取值及赋值示例详解
Oct 18 #Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 #Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 #Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 #Javascript
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
js实现购物车商品数量加减
2020/09/21 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python实现360的字符显示界面
2014/02/21 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
一套.net面试题及答案
2016/11/02 面试题
班级安全教育实施方案
2014/02/23 职场文书
卫生系统先进事迹
2014/05/13 职场文书
篮球赛口号
2014/06/18 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
爱心捐书倡议书
2015/04/27 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android