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

 更新时间:2020-10-18 12:16:31   作者:佚名   我要评论(0)

vue 实现自定义树状结构图

可动态添加、删除
可整体拖拽
如需内容也为动态,把组件内容使用input、select等组件替换
数据结构





treeData: [{
na

vue 实现自定义树状结构图

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

思路:

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

2、加上条件判断

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

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

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

总结

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

相关文章

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

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

    vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态,把组件内容使用input、select等组件替换 数据结构 treeData: [{ na
    2020-10-18
  • Yii中特殊行为ActionFilter的使用方法示例

    Yii中特殊行为ActionFilter的使用方法示例

    新建 app\filters\LoggingFilter 继承 yii\base\ActionFilter LoggingFilter 的功能: 在指定请求的 action 前后各记录一条日志 <&#63;php namespace app\filters
    2020-10-18
  • 详解VUE中的插值( Interpolation)语法

    详解VUE中的插值( Interpolation)语法

    背景分析 在传统的html页面中我们可以定义变量吗?当然不可以,那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义ht
    2020-10-18
  • 你所不知道的Spring自动注入详解

    你所不知道的Spring自动注入详解

    自动注入和@Autowire @Autowire不属于自动注入! 注入方式(重要) 在Spring官网上(文档),定义了在Spring中的注入方式一共有两种:set方法和构造函数。 也就是说
    2020-10-18
  • Anaconda+spyder+pycharm的pytorch配置详解(GPU)

    Anaconda+spyder+pycharm的pytorch配置详解(GPU)

    第一步 : 从清华大学开源软件镜像站下载Anaconda:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/&#63;C=M&O=D 安装过程中需要勾选如下图 装
    2020-10-18
  • Android Studio配置(Android Studio4.1为例)

    Android Studio配置(Android Studio4.1为例)

    Android Studio下载(下文统称AS) AS最新版下载请戳:AS下载 Android SDK下载 SDK安装器下载 SDK安装器下载请戳:SDK下载 然后根据你的电脑选择合适版本
    2020-10-18
  • mysql对于模糊查询like的一些汇总

    mysql对于模糊查询like的一些汇总

    1、常见用法: (1)搭配%使用 %代表一个或多个字符的通配符,譬如查询字段name中以大开头的数据: (2)搭配_使用 _代表仅仅一个字符的通配符,把上面那条查询语句
    2020-10-18
  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    如何搭建一个完整的Vue3.0+ts的项目步骤

    相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本)。所以Vue3.0的
    2020-10-18
  • Android studio 4.1打包失败和插件错误提示的解决

    Android studio 4.1打包失败和插件错误提示的解决

    一、Android studio 升级4.1,Android Gradle插件从4.0.2升级到4.1.0后打包失败,回退到4.0.2后打包正常。 错误信息: &#8226;What went wrong: Execution fa
    2020-10-18
  • AndroidStudio升级4.1坑(无法启动、插件plugin不好用、代码不高亮)

    AndroidStudio升级4.1坑(无法启动、插件plugin不好用、代码不高亮)

    上班坐稳,打开AS看到studio有更新,于是就点击升级,4.1版本,看更新日志:bug修复什么什么一大堆,感觉挺好的,应该做了不少优化,结果升级完后就无法启动了,于是
    2020-10-18

最新评论