树形结构---------找到项目单位选中得id对应得二级单位、默认选中某个树节点及清除选中的节点，同时给树形结构展示部分name添加一些数据

element-ui中使用el-tree横向滚动条不显示

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–取消选中高光

<div style="width:24%;height:100%;border-right:1px solid #DCDFE6;overflow-x:auto;">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="padding:0 20px 20px;">
          </el-input>
          <!-- 左侧的树 -->
          <div style="width:100%;height:500px;overflow-y:auto;margin:0 auto;">
            <el-tree ref="tree" class="filter-tree" :data="setUserstreeData" :props="defaultProps" :filter-node-method="filterNode" :highlight-current="highlightCurrent" @node-click="setReviewerNodeClick" default-expand-all node-key="id" :default-expanded-keys="[expandedKeys]">
            </el-tree>
          </div>
</div>

单选时，可将
:default-expanded-keys="[expandedKeys]"  换成  :current-node-key="expandedKeys"

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;
    },

3. 给树形结构选中的值赋值给输入框

<el-form-item label="单位：" prop="comName">
     <el-popover placement="bottom-start" trigger="click">
         <el-input slot="reference" v-model="ruleForm.comName" clearable @change="changeOfficeName" ></el-input>
         <el-tree class="filter-tree" :data="treeData" :props="defaultProps" ref="popoverTree" :highlight-current="highlightCurrent"  node-key="id" :default-expanded-keys="[expandedKeys]" 
         @node-click="(data,node,item)=>officeIdHandleNodeClick(data,node,item,'单位')">
         </el-tree>
     </el-popover>
 </el-form-item>

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;
},