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;
    },
  • 相关阅读:
    数据库新增“自动添加”类字段 auto_now_add 如何不影响之前数据
    django rest framework serializer中获取request中user方法
    django Table doesn't exist
    python 日期换算星期 蔡勒公式
    python pdfkit html转pdf响应式轮子 django例
    Python Excel 多sheet 多条数据 自定义写入
    Python 爬虫 Vimeo视频下载链接
    Python 快速排序 算法
    jvm内存模型
    JMV的学习
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/9667672.html
Copyright © 2011-2022 走看看