递归树处理,配合vue的vueTreeselect组件使用
在项目中经常会使用到tree,并且需要对递归树进行操作。
在vue项目中,使用vue-treeselect插件(https://vue-treeselect.js.org/)
使用中遇到的问题:
1、接口返回的数据格式中,children:null,也就是说哪怕已经是最子节点,children为空,接口依旧会存在这个属性。由于这个属性的存在,导致节点前存在一个小三角符号,展开又是空子节点。因此页面需要对children为空的数据属性进行递归判断删除。


解决方法:


递归函数的具体写法:
diGuiTree(item) { //递归便利树结构
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null ?
delete item.children : this.diGuiTree(item.children);
})
},
2、接口返回的数据格式中,并不包括禁止选择的项目。由于项目需要根据当前选择的节点,在编辑父节点的时候禁止下选择当前的节点及其子节点。根据vue-treeselect的数据规则,isDisabled = false禁止选择。因此需要递归判断当前tree ID是否等于选择的节点ID

递归函数的具体写法:
diGuiTreeEdit(item,compID) { // 编辑情况下,禁止选择当前节点及其子节点
let data = item;
let treeAry = [];
for (let i in data) {
let v = data[i];
let node = {};
if (v === null || v === undefined) {}
else {
if (v.children && v.children.length > 0) {
if (v.id == compID) {
node.isDisabled = true;
} else {
node.isDisabled = false;
}
node.id = v.id;
node.label = v.label;
node.name = v.name;
node.children = this.diGuiTreeEdit(v.children, compID);
treeAry.push(node);
} else {
if (v.id == compID) {
node.isDisabled = true;
} else {
node.isDisabled = false;
}
node.id = v.id;
node.label = v.label;
node.name = v.name;
treeAry.push(node);
}
}
}
return treeAry;
},
递归树处理,配合vue的vueTreeselect组件使用的更多相关文章
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- 关于Vue中根组件与组件树的理解
在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.c ...
- Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 使用vue与element组件
1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- 使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
最近在改造原有Bootstrap开发框架,增加一个Vue&Element前端的时候,发现需要处理一个级联更新的过程,就是选择公司,然后更新部门,选择部门,或者人员列表,选择作为主管的一个实现, ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
随机推荐
- SpProcPool阅读笔记--1
公司产品用了一个开源的框架,最近出了点问题,细看了这个框架. SpProcPool: https://github.com/spsoft/spprocpool.git 我们的线程池用的是传递文件描述 ...
- 自学python到找到工作的心得
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
- 2016 年 Java 工具和技术的调查:IDEA 已超过
最近「技术最前线」看到 RebelLabs 做了一次 2016 年 Java 工具与技术的调查,调查报告虽然是 6 月公布的,但数据一点也不过时. 所以「技术最前线」忙会了一中午,写了这篇文章,带大家 ...
- soapui测试接口使用步骤
1.新建项目 2. 定义接口 url输入接口 3.新建测试集 选择项目,右键 4.在测试集下新建测试用例 5.在测试步骤中导入要测试的请求 6.run
- ie版本
<!--[if lte IE 6]> 自定义代码 <![endif]-->
- ASP.NET CORE--WIN10上无法单步调试解决方法
参考这篇文章 http://www.cnblogs.com/artech/p/debug-in-vs-code.html In order to be able to debug cross-plat ...
- Android測试APP工具(一)
近期面试APP开发者的时候,遇到了技术总监问 APP測试的概念性问题.后面感觉主要的项目流程.项目逻辑.屏幕适配. 測试是全然没有问题的.可是对于APP的性能測试.压力測试等高端的測试.还是存在着美中 ...
- AnyForWeb告诉你什么才是“最好的”编程语言
一被问到最好的编程语言是什么,专家们一定会异口同声的说,'世界上根本没有什么最好的,每一种编程语言都有它存在的意义和价值'. AnyForWeb认为,后半句所阐述的观点全然没错,但最好的也并不是不存在 ...
- ubuntu16.04+caffe训练mnist数据集
1. caffe-master文件夹权限修改 下载的caffe源码编译的caffe-master文件夹貌似没有写入权限,输入以下命令修改: sudo chmod -R 777 ~/caffe-ma ...
- Python 函数(一)
定义一个函数 函数的第一行语句可以选择性地使用文档字符串—用于存放函数说明. 函数内容以冒号起始,并且缩进. return [表达式] 结束函数,选择性地返回一个值给调用方.不带表达式的retur ...