在项目中经常会使用到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组件使用的更多相关文章

  1. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  2. 关于Vue中根组件与组件树的理解

    在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.c ...

  3. Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用

    一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...

  4. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  5. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

  6. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  7. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  8. 使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

    最近在改造原有Bootstrap开发框架,增加一个Vue&Element前端的时候,发现需要处理一个级联更新的过程,就是选择公司,然后更新部门,选择部门,或者人员列表,选择作为主管的一个实现, ...

  9. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. 【CodeForces 271D】Good Substrings

    [链接] 我是链接,点我呀:) [题意] [题解] 字典树 我们可以两重循环(i,j) 来枚举所有的子串 即i=1,j=1,2,3... i=2,j = 2,3,4,.. 于是我们在i变化的时候(就是 ...

  2. 使用gson进行数据(集合数据)的转换 并且返回给前端 进行动态解析 并添加

    后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时  需要把得到的字符串  转换为object数组 -------------- ...

  3. 简洁又快速地处理集合——Java8 Stream(上)

    Java 8 发布至今也已经好几年过去,如今 Java 也已经向 11 迈去,但是 Java 8 作出的改变可以说是革命性的,影响足够深远,学习 Java 8 应该是 Java 开发者的必修课. 今天 ...

  4. [SharePoint][SharePoint2013循序渐进]SPS2013简介

    本章概要: 1.啥是SPS2013 2.SharePoint如何作用于团队协作和信息共享 3.SP2013有哪些用户权限 4.什么是SharePoint2013 online 5.SP在内部署和在线订 ...

  5. 機器學習基石 机器学习基石 (Machine Learining Foundations) 作业2 Q16-18 C++实现

    大家好,我是Mac Jiang,今天和大家分享Coursera-NTU-機器學習基石(Machine Learning Foundations)-作业2 Q16-18的C++实现.尽管有非常多大神已经 ...

  6. ListView的adapter中getView方法一直调用

    当ListView的高度不定(比如重写ListView搞成可自己主动的扩展的ListView)或 ListView嵌套在SrollView(高度不定)中,listView中的一个item元素改变会使得 ...

  7. Java中使用多线程、curl及代理IP模拟post提交和get訪问

    Java中使用多线程.curl及代理IP模拟post提交和get訪问 菜鸟,多线程好玩就写着玩.大神能够路过不吝赐教.小弟在这受教.谢谢! 很多其它分享请关注微信公众号:lvxing1788 ~~~~ ...

  8. 0x26 广搜变形

    电路维修 这道题虽然乍一看就会想斜对角的两点之间边权受初始电路的影响要么为0要么为1,但是有一个思考点就是可以通过奇偶性,证明相邻的两个点是不可能在同一个电路中.练习一下双端队列. #include& ...

  9. hdoj--2803--The MAX(水题)

    The MAX Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  10. 关于content-type

    content-type 包含了表单类型和边界字符串信息. 关于content-type get请求的headers中没有content-type这个字段 post 的 content-type 有两 ...