不依任何赖第三方,单纯用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 ...
随机推荐
- Jackson的高级应用(转)
Jackson 是当前用的比较广泛的,用来序列化和反序列化 JSON 的 Java 的开源框架.Jackson 社 区相对比较活跃,更新速度也比较快, 从 Github 中的统计来看,Jackson ...
- sql server 存储过程中使用变量表,临时表的分析(续)
最近,我有一朋友,对我说他的数据库中的很多存储过程,执行都是超时.让我替他看看是什么原因.我一看,原来他的存储过程中用了很多的临时表与变量表.于是我跟他说过犹不及. 在存储过程中使用临时表或变量表,使 ...
- mysql-essential-5.1.55-win32 安装
1.选择无事物安装 2.my.cnf [mysqld] default-storage-engine=INNODB innodb=on 3.设置数据目录 手动创建目录 D:\data [mysqld] ...
- Linux系统入门命令100条 转
https://www.howtoforge.com/linux-commands/ 2017-04-27 RiboseYim 睿哥杂货铺 Author : Himanshu Arora 原文:htt ...
- Using ASIHTTPRequest in an iOS project
1) Add the files Copy the files you need to your project folder, and add them to your Xcode project. ...
- ElastcSearch的Mapping映射建立
根据oracle的字段来建立ElasticSearch的Mapping public class Start { private static Logger log = LoggerFactory.g ...
- CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置
CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...
- es创建索引的格式,并初始化数据
es创建索引的格式,并初始化数据 学习了:https://www.imooc.com/video/15759 1, 创建格式 POST 127.0.0.1:9200/book/novel/_mappi ...
- SpringMVC 下载XLS文档的设置
页面设置参考上文.SpringMVC 下载文本文档的设置 此文是关于xls文档下载的,这个文档使用Apache的POI生成,需要的jar包可以从下面地址下载: http://pan.baidu.com ...
- 【Excle数据透视表】如何为数据透视表应用样式
如下数据透视表样例,如何为该数据透视表设置样式呢? 步骤 单击数据透视表区域的任意单元格→数据透视表工具→设计→数据透视表样式→打开下拉箭头即可任意选择