不依任何赖第三方,单纯用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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
React配置子路由的实现
Jun 03 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
我的论坛源代码(十)
2006/10/09 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
浅谈五大Python Web框架
2017/03/20 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python如何从文件读取数据及解析
2019/09/19 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
学校百日安全生产活动总结
2014/07/05 职场文书
质量月活动总结
2014/08/26 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
2016年校长新年寄语
2015/08/17 职场文书