不依任何赖第三方,单纯用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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
Javascript实现的分页函数
2007/02/07 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
浅谈react路由传参的几种方式
2021/03/23 Javascript
《学会待客》教学反思
2014/02/22 职场文书
计生专干事迹
2014/05/28 职场文书
法语专业求职信
2014/07/20 职场文书
创先争优宣传标语
2014/10/08 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS