zoukankan      html  css  js  c++  java
  • 递归树处理,配合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;
    },
  • 相关阅读:
    【转】C#操作Word的超详细总结
    【转】C#操作word定位光标
    详解Amazon S3上传/下载数据
    VS2010程序崩溃- APPCRASH
    环境搭建
    centos搭建svn服务器
    SpringMVC必备知识点汇总
    SpringSecurity 配置
    数据库汇总
    java.io.IOException 断开的管道 解决方法 ClientAbortException: java.io.IOException: Broken pipe
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/9667672.html
Copyright © 2011-2022 走看看