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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
js 居中漂浮广告
Mar 21 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python编程实现希尔排序
2017/04/13 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python日期时间Time模块实例详解
2019/04/15 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
建筑自我鉴定
2013/10/19 职场文书
优秀经理事迹材料
2014/02/01 职场文书
群众路线专项整治方案
2014/10/27 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
看上去很美观后感
2015/06/10 职场文书
教师教育教学随笔
2015/08/15 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
mysql 子查询的使用
2022/04/28 MySQL