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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
使用Ajax实现进度条的绘制
Apr 07 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
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
js 与或运算符 || && 妙用
2009/12/09 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python定时器使用示例分享
2014/02/16 Python
Python中有趣在__call__函数
2015/06/21 Python
python实现字符串和字典的转换
2018/09/29 Python
python tkinter界面居中显示的方法
2018/10/11 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python 实现return返回多个值
2019/11/19 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
华为python面试题
2016/05/03 面试题
会计职业生涯规划书
2014/01/13 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
信息管理专业自荐书
2014/06/05 职场文书
银行求职自荐信
2014/06/30 职场文书
忠诚教育心得体会
2014/09/03 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书