优化

src/views/home/components/drawpic.vue

@@ -9,6 +9,7 @@
           @click="deletePic"
         ></el-button>
         <el-button type="primary" @click="savePointer">保存</el-button>
+        <span style="margin-left: 20px">{{ currentNodeData.name }}</span>
       </h3>
       <div class="picRow">
         <p

src/views/home/components/picTree.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="picTree">
+    <div class="searchBar">
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        prefix-icon="el-icon-search"
+        clearable
+      >
+      </el-input>
+    </div>
     <el-tree
       ref="tree"
       :data="piclist"
       :props="defaultProps"
-      node-key="name"
       accordion
+      node-key="name"
       :default-expanded-keys="defaultExpandedKeys"
       highlight-current
+      :filter-node-method="filterNode"
       :current-node-key="currentNodekey"
       :expand-on-click-node="true"
       @node-click="handleNodeClick"
@@ -33,6 +43,7 @@ export default {
   props: [],
   data() {
     return {
+      filterText: "", //查询字段过滤
       piclist: [],
       currentNodeData: [], //选中的数据
       defaultExpandedKeys: [],
@@ -54,7 +65,37 @@ export default {
   mounted() {
     this.getTreeList();
   },
+  watch: {
+    // filterText(val) {
+    //   console.log(val);
+    //   this.$refs.tree.filter(val);
+    //   console.log(this.$refs.tree);
+    // },
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
   methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      this.searchName = data.name;
+      //console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+      let nowval = data[this.defaultProps.label].toUpperCase();
+      return nowval.indexOf(value.toUpperCase()) !== -1;
+    },
     //获取linelist 线路内容
     getTreeList() {
       getTreeApi()
@@ -70,6 +111,7 @@ export default {
           this.currentNodeData = JSON.parse(
             localStorage.getItem("currentData")
           );
+
           console.log(this.currentNodeData);
           if (
             this.currentNodeData !== null &&
@@ -127,6 +169,19 @@ export default {
       console.log(this.pathParams);
       this.getlabels();
       localStorage.setItem("currentData", JSON.stringify(node));
+      this.scrollView();
+    },
+    scrollView() {
+      if (this.currentData) {
+        this.$nextTick(() => {
+          let treeComponent = this.$refs.tree.$el;
+          let node = treeComponent.querySelector(".is-current");
+          console.log(node);
+          if (node) {
+            node.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        });
+      }
     },
     findParentNode(childId, treeData) {
       console.log(childId);
@@ -172,7 +227,7 @@ export default {
 </script>
 <style lang="less">
 .picTree {
-  width: 380px;
+  width: 230px;
   padding: 10px;
   border: 1px solid #dcdfe6;
   border-radius: 4px;