搜索框布局

src/views/manager/projectinfo/independent.vue

@@ -51,8 +51,7 @@
               ref="crud"
               @selection-change="selectionChange"
               :page.sync="page"
-              @search-change="searchChange" 
-              @search-reset="resetChange"
+           
                @on-load="onLoad"
             >
             
@@ -75,7 +74,11 @@
                           >删除表单
                           </el-button>
               </template>
-             
+               <template slot="menuLeft" slot-scope="{size}">
+                     <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size"  clearable>
+                         <i  class="el-icon-search" slot="append" @click="searchChange"></i>
+                    </el-input>
+                </template>
                 <template slot-scope="{type,size,row}" slot="menu">
                       <el-button  :size="size" :type="type" @click="Associationlist(row)">关联清表</el-button>
                       <el-button  :size="size" :type="type" @click="rightClick(
@@ -217,6 +220,7 @@ export default {
   },
   data() {
     return {
+      input3:'',
       page:{
         current:1,
         size:10,
@@ -289,12 +293,8 @@ export default {
           {
             label: "元素表名称",
             prop: "title",
-            search: true,
             editDisplay: false,
             addDisplay: false,
-            searchPlaceholder:'请输入元素表名称',
-            searchSpan:18,
-            searchLabelWidth:100,
           },
           {
             label: "元素表类型",
@@ -412,15 +412,17 @@ export default {
         return res.data
       }
     },
-    //搜索
-    searchChange(params,done){
-     this.tabTypeLazyTree(this.treeId, this.projectid,this.page.current,this.page.size,params.title).then((res)=>{
-          console.log(res.records);
-          this.loadData=res.records;
-           this.page.total=res.total
-           done();
-        })
 
+    searchChange(){
+       if(this.treeId){
+        this.tabTypeLazyTree(this.treeId, this.projectid,this.page.current,this.page.size,this.input3).then((res)=>{
+          this.loadData=res.records
+          this.page.total=res.total
+          
+        })
+      }else{
+         this.$message.warning("请选选择左侧节点");  
+      }
     },
      onLoad(page){
       console.log(page,'page');
@@ -724,4 +726,7 @@ export default {
   box-sizing: border-box;
   padding-bottom: 10px;
 }
+/deep/.avue-crud__left{
+  width: 65%;
+}
 </style>

src/views/manager/wbsinfo/element.vue

@@ -70,7 +70,7 @@
                         </el-button>
                   </template>
                   <template slot="menuLeft" slot-scope="{size}">
-                     <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" style="width:600px">
+                     <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" >
                          <i  class="el-icon-search" slot="append" @click="searchChange"></i>
                     </el-input>
                 </template>
@@ -774,7 +774,6 @@ export default {
     },
         //搜索
     searchChange(){
-      console.log(this.input3);
      if(this.treeId){
          this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,this.input3).then((res)=>{
           this.loadData=res.records
@@ -782,8 +781,7 @@ export default {
           
         })
       }else{
-         this.$message.warning("请选选择左侧节点");
-          
+         this.$message.warning("请选选择左侧节点");  
       }
      
     },
@@ -1243,7 +1241,7 @@ export default {
   box-sizing: border-box;
   padding-bottom: 10px;
 }
-// /deep/.avue-crud__left{
-//   width: 65% !important;
-// }
+/deep/.avue-crud__left{
+  width: 65% !important;
+}
 </style>