清表节点树，搜索功能

src/views/exctab/excelmodel/excelmodel.vue

@@ -8,6 +8,14 @@
       style="width:26%;padding-left:0px;"
     >
       <div class="boxnei">
+        <div class="flex">
+          <el-input
+            size="small"
+            placeholder="输入关键字搜索"
+            v-model="filterText">
+          </el-input>
+          <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
+        </div>
         <!-- 树结构 -->
         <el-tree
           style="width:100%;"
@@ -20,6 +28,51 @@
           @node-click="nodeClick"
           node-key="id"
           :expand-on-click-node="false"
+          v-show="!allTreeShow"
+        >
+          <span
+            class="custom-tree-node"
+            slot-scope="{ data ,node }"
+            @mouseover.stop="mouseOver(data)"
+            @mouseleave.stop="mouseLeave(data)"
+            style="box-sizing: border-box;padding-right:70px!important;;"
+          >
+            <div style="width:100%;">
+              <span style="text-overflow: ellipsis;"> {{ data.name }} </span>
+              <!-- <span> {{ node}} </span> -->
+              <!-- 添加 -->
+              <span v-show="data.moreShow">
+                <i
+                  class="el-icon-circle-plus-outline marleft10"
+                  @click.stop="addExcel(data)"
+                  v-if="data.fileType!=3"
+                ></i>
+                <!-- 编辑 -->
+                <i
+                  class="el-icon-edit marleft10"
+                  @click.stop="editExcel(data)"
+                  v-if="data.fileType!=1"
+                ></i>
+                <!-- 删除 -->
+                <i
+                  class="el-icon-delete marleft10"
+                  @click.stop="deleteExcelM(data,node)"
+                ></i>
+              </span>
+            </div>
+          </span>
+        </el-tree>
+        <el-tree
+          style="width:100%;"
+          ref="treeall"
+          v-loading="treeloading"
+          :data="allTreeData"
+          :props="defaultProps"
+          @node-click="nodeClick"
+          node-key="id"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          v-show="allTreeShow"
         >
           <span
             class="custom-tree-node"
@@ -278,7 +331,7 @@
 </template>
 
 <script>
-import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu, deleteExcel } from '@/api/exctab/excelmodel'
+import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu, deleteExcel ,tabLazytreeAll} from '@/api/exctab/excelmodel'
 export default {
   data () {
     return {
@@ -290,6 +343,10 @@ export default {
       heightss: '',//
       loading: false,//懒加载
       data: [],//清表模板
+      filterText:"",//搜索关键字
+      allTreeShow:false,//是否显示整棵树
+      treeloading:false,
+      allTreeData:[],
       defaultProps: {
         children: "children",
         isLeaf: function (data) {
@@ -755,6 +812,35 @@ export default {
       });
     },
     //#endregion
+
+    //搜索树
+    treeFilter(){
+      if(this.filterText){
+        this.allTreeShow = true;
+        if(!this.allTreeData.length){
+          this.treeloading = true;
+          tabLazytreeAll({
+            modeId: this.$route.params.id,
+            name:'',
+          }).then((res)=>{
+            this.treeloading = false;
+            this.allTreeData = res.data.data;
+            this.$nextTick(()=>{
+              this.$refs.treeall.filter(this.filterText);
+            })
+          })
+        }else{
+          this.$refs.treeall.filter(this.filterText);
+        }
+      }else{
+        this.allTreeShow = false;
+      }
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    }
   },
   created () {
     this.excelType()//清表类型