美文网首页
element ui 的级联选择器的数据回显

element ui 的级联选择器的数据回显

作者: 宏_4491 | 来源:发表于2020-11-10 09:38 被阅读0次

    element级联选择器根据id值回显父亲节点

     //回显(多级)
          changeDetSelect(key, treeData) {
            let arr = []; // 在递归时操作的数组
            let returnArr = []; // 存放结果的数组
            let depth = 0; // 定义全局层级
            // 定义递归函数
            function childrenEach(childrenData, depthN) {
              for (var j = 0; j < childrenData.length; j++) {
                depth = depthN; // 将执行的层级赋值 到 全局层级
                arr[depthN] = childrenData[j].id;
                if (childrenData[j].id== key) {
                  returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组,截断并保存到结果数组,
                  break;
                } else {
                  if (childrenData[j].children) {
                    depth++;
                    childrenEach(childrenData[j].children, depth);
                  }
                }
              }
              return returnArr;
            }
    
            return childrenEach(treeData, depth);
          },
    
    调用:
    this.changeDetSelect(Number(key), treeData)
    

    递归判断列表,把最后的children设为undefined

          getTreeData(data) {
            for (var i = 0; i < data.length; i++) {
              if (data[i].department.length < 1) {
                // children若为空数组,则将children设为undefined
                data[i].department = undefined;
              } else {
                // children若不为空数组,则继续 递归调用 本方法
                this.getTreeData(data[i].department);
              }
            }
            return data;
          },
    
    调用:
    this.getTreeData(data)
    

    相关文章

      网友评论

          本文标题:element ui 的级联选择器的数据回显

          本文链接:https://www.haomeiwen.com/subject/ztvdbktx.html