不依任何赖第三方,单纯用vue实现Tree 树形控件
这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧。
先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态,所以不是太好看,需要的自行修改就好)
我直接用的vue-cli搭建的项目,代码目录如下:
使用方式如下:
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动画效果
项目完整代码地址:https://github.com/YalongYan/tree
不依任何赖第三方,单纯用vue实现Tree 树形控件的更多相关文章
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- vue+element tree(树形控件)组件(1)
最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- 【vue】使用vue+element搭建项目,Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
- vue中element-ui树形控件自定义节点,注意一下
在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行. 一 ...
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...
- vue使用树形控件z-tree,动态添加数据,默认展开第一行
环境:vue 2.9.3; webpack; 插件:z-tree,jquery(cnpm install xxxx) 问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集 ...
- 关于vue.js中表单控件绑定练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
随机推荐
- 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式
IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...
- 一篇文章让你彻底弄懂WinForm GDI 编程基本原理
一 GDI编程原理 GDI(Graphics Device Interface,图形设备接口),主要负责Windows系统与绘图程序之间的信息交换,处理所有Windows程序的图形输出. GDI的常用 ...
- python2 to3
http://blog.csdn.net/zhzh213/article/details/53842790 有个内部工具叫做2to3.py位置在Python3/tool/script文件夹. 首先CD ...
- zoj 3430 Detect the Virus(AC自己主动机)
题目连接:zoj 3430 Detect the Virus 题目大意:给定一个编码完的串,将每个字符相应着表的数值转换成6位二进制.然后以8为一个数值,又一次形成字符 串,推断给定询问串是否含有字符 ...
- JWT笔记(2)
上文对JWT模块进行了一个简单的分析.这篇文章稍微做出一些深入的了解. 一,Header篡改攻击 因为JWT的Header是强制有效并且是明文传输(Base64URL编码,几乎等同于明文).那么恶意用 ...
- textarea限制字符输入方法
function check(obj){ var Maxchar=20; if(obj.value.length>Maxchar){ //如果超出 obj.value=obj.value.sub ...
- hdu 4865 Peter's Hobby (隐马尔可夫模型 dp)
Peter's Hobby Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- win8硬盘安装Ubuntu14.04双系统參考教程
硬盘安装,无需光盘.U盘.win8为主.Ubuntu14.04为辅.可将Windows或Ubuntu设置为开机默认启动项.在Ubuntu下可查看.操作Windows系统下的文件:适用于安装和14.04 ...
- linux ln 命令使用参数详解(ln -s 软链接)(转)
这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln -s 源文件 目标文件. 当 我们需要在不同的 ...
- crm使用soap取消用户訪问记录权限
//取消訪问权限 function demo() { //操作记录的id var targetId = "A8A46444-BA10-E411-8A04-00155D002F ...