不依任何赖第三方,单纯用vue实现Tree 树形控件的案例


Posted in Javascript onSeptember 21, 2020

这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧。

先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态,所以不是太好看,需要的自行修改就好)

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

我直接用的vue-cli搭建的项目,代码目录如下:

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

使用方式如下:

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

treeData的格式如下:

treeData: [
    {open: false, name: '1', level: 0, checked: true},
    {
     open: false, // opend 是否展开子集
     name: '2',
     level: 0, //level代表第几层
     checked: false, // checked 代表是否选中状态
     children: [
      {
       open: false,
       name: '3',
       level: 1,
       checked: false,
       children: [
        {open: false, name: '4', level: 2, checked: false},
        {
         open: false,
         name: '5',
         level: 2,
         checked: false
        }
       ]
      }
     ]
    }
   ],

这个组件设计到几个关键点如下:

1. 深度watch

由于数据是个深层的对象,所以单纯的watch,检测不到数据的变化,所以使用deep,代码如下:

watch: {
  // 深度监听 treeDate的数据变化 用 deep
  treeData: {
   handler: function (newVal, oldVal) {
    this.calculateSelectFormResult()
   },
   deep: true
  }
 }

2.递归

数据的结果是用递归遍历出来的,

calculateSelectFormResult: function () {
   var arr = []
   function f (obj) {
    for (var i in obj) {
     if (obj[i].checked) {
      // console.log(2)
      arr.push(obj[i].name)
     }
     if (obj[i].children) {
      if (obj[i].children.length !== 0) {
       f(obj[i].children)
      }
     }
    }
   }
   f(this.treeData)
   this.selectFormResult = arr
   console.log(this.selectFormResult)
  }

3.模拟slideDown slideUp动画效果

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

项目完整代码地址: https://github.com/YalongYan/tree

补充知识:vue实现elment 可编辑树形控件

功能实现程度:

elment树形控件,已具备新增、删除功能,此项目,添加编辑功能,新增时可对节点命名,也可直接给已添加的节点修改名字

先看效果:

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

控件有所改动,如加输入框,输入关键字过滤,节点图标变换。。。。参看elment Tree树形控件文档即可

项目下载

项目地址:https://github.com/midnightvisitor/vue-el-tree.git

如需要,请自行下载

以上这篇不依任何赖第三方,单纯用vue实现Tree 树形控件的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JS定时器实例
Apr 17 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
微信小程序实现转盘抽奖
Sep 21 #Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 #Javascript
微信小程序实现打卡签到页面
Sep 21 #Javascript
微信小程序实现签到弹窗动画
Sep 21 #Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 #Javascript
微信小程序实现日历签到
Sep 21 #Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
《观舞记》教学反思
2014/04/16 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
实习单位意见
2015/06/04 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
Hive日期格式转换方法总结
2022/06/25 数据库