网状结构---------找到建设单位选中得id对应得一级单位、默认选中某个树节点及清除选中的节点，同时给树形结构展示部分name添加一些内容

原创

小哥 3年前 (2022-11-10) 阅读数 5 #大杂烩

查找选定的项目单位id对应的二次单元

1.查找选定的项目单位id对应的二次单元
2.默认情况下，选择并给定树节点name添加一些数据
3. 为树结构选择的值将分配给输入框。

1.查找选定的项目单位id对应的二次单元

this.treeData对于树结构数据，data.id是否需要匹配id

this.getTreeName(this.treeData, data.id);

getTreeName(list, id) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.id === id) {
          console.log("a.secondaryUnitShortCode", a.secondaryUnitShortName);
          this.ruleForm.secCode = a.secondaryUnitShortCode;
          return a.name;
        } else {
          if (a.child && a.child.length > 0) {
            let res = _this.getTreeName(a.child, id);
            if (res) {
              return res;
            }
          }
        }
      }
    },

2.默认情况下，选择并给定树节点name添加一些数据

通过更改清除所选节点highlightCurrent变量，true-选择突出显示，false-取消选中突出显示


          
          
          
          
            
            
          


filterText: "", //左边的树过滤器
setUserstreeData: [], //左侧的树
defaultProps: {
        children: "child",
        label: "name",
      },
expandedKeys:"",
highlightCurrent:true,

// 监控data中的数据更改
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

// 把树放在左边
    getTree(code) {
      let params = {
        id: this.id,
      };
      getTree(params)
        .then((res) => {
          console.log("ressafds44444444", res);
          this.setUserstreeData = [res.data];
          this.getTreeName(this.setUserstreeData);
          this.expandedKeys = res.data.id;
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.expandedKeys);//默认情况下选择节点
          });
          this.setReviewerNodeClick(res.data);//这里模拟了树结构点击事件。node-click
        })
        .catch((err) => {});
    },

this.getTreeName(this.setUserstreeData);
// 查找选定的项目单位id对应的二次单元
    getTreeName(list) {
      let _this = this;
      list.forEach((item, index) => {
        let a = item;
        if (index < list.length) {
          let mark = "";
          if (a.state == "2") {
            mark = "(已完成)";
          } else if (a.state == "1") {
            mark = "(未完成)";
          }
          a.name = a.name + mark + "";
        }
        if (a.child && a.child.length > 0) {
          console.log("a.child", a.child);
          if (a.child && a.child.length > 0) {
            _this.getTreeName(a.child);
          }
        }
      });
      return;
    },

 //  左侧树  支持过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

 // 左侧树 单击树的单位
    setReviewerNodeClick(data) {
      console.log("kdsafkdsfn", data);
      this.expandedKeys = data.id;
    },

为树结构选择的值将分配给输入框。

ruleForm:{ comName:"", comId:"", }, treeData:[], defaultProps: { children: "child", label: "name", }, highlightCurrent: true,//是否显示突出显示 expandedKeys: "", //默认情况下为树选择并突出显示哪个节点

// 单位-当项目单位input删除后，相应的officeId也置空 changeOfficeName() { this.ruleForm.comId = ""; this.expandedKeys = ""; this.highlightCurrent = false; }, // 单位-选中单位 officeIdHandleNodeClick(data,node,item,val) { console.log(data,node,item,val) this.ruleForm.comId = data.id; this.ruleForm.comName = data.name; this.expandedKeys = data.id; this.highlightCurrent = true; },