封面选择窗口里搜索框实时触发搜索

src/components/tableSelect2.vue

@@ -11,10 +11,9 @@
     
     <div class="filtert">
       <div>
-        <input type="text" placeholder="输入关键词" v-model="searchKey"
-          @keyup.enter="onSearch">
-        <i class="iconfont iconsearch"
-          @click="onSearch"></i>
+        <input type="text" placeholder="输入关键词" v-model="searchKey"/>
+        <i v-if="!searchKey" class="iconfont iconsearch"/>
+        <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
       </div>
     </div>
 
@@ -31,7 +30,7 @@
         v-infinite-scroll="requestMoreData"
         :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
       >
-        <tr v-for="(item,i) in list" :key="i">
+        <tr v-for="(item,i) in imageList" :key="i">
           <td>
             <div class="checkbox">
               <input type="checkbox" @change="e => selectItem(item, e.target)"
@@ -52,12 +51,13 @@
         </tr>
       </tbody>
       <!-- 无数据时的提示 -->
-      <tbody v-if="list.length === 0">
+      <tbody v-if="imageList.length === 0 && !hasMoreData">
         <tr>
           <td colspan="10">
             <div class="nodata">
               <img :src="$noresult" alt="">
-              <span>{{haveClickedSearch? '未搜索到结果~' : '暂无素材，快去上传吧'}}</span>
+              <span v-if="lastestUsedSearchKey">{{'未搜索到结果~'}}</span>
+              <span v-if="!lastestUsedSearchKey">{{'暂无素材，快去上传吧'}}</span>
             </div>
           </td>
         </tr>
@@ -76,6 +76,7 @@ import vAudio from '@/components/audio'
 import { getMaterialList} from "@/api";
 import { changeByteUnit } from '@/utils/file'
 import config from "@/config";
+import { debounce } from "@/utils/other.js"
 
 export default {
   props:{
@@ -97,6 +98,12 @@ export default {
     vAudio
   },
   watch:{
+    searchKey: {
+      handler: function () {
+        this.refreshMaterialList()
+      },
+      immediate: false,
+    },
   },
   computed:{
     tabHeaders(){
@@ -107,12 +114,11 @@ export default {
   },
   data () {
     return {
-      list: [],
+      imageList: [],
       
-      // todo
-      haveClickedSearch:'',
       select: [],
       searchKey:'', // 搜索关键词
+      lastestUsedSearchKey: '',
 
       currentMaterialType: 'image',
       
@@ -129,15 +135,12 @@ export default {
       }
       this.select = [item]
     },
-    onSearch() {
-      this.haveClickedSearch = !!this.searchKey
-      this.refreshMaterialList()
-    },
     requestMoreData() {
       this.isRequestingMoreData = true
+      const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
-          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+          pageNum: Math.floor(this.imageList.length / config.PAGE_SIZE) + 1,
           pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: 'image',
@@ -150,21 +153,25 @@ export default {
             i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
             return i;
           });
-          this.list = this.list.concat(newData)
-          if (this.list.length === data.data.total) {
+          this.imageList = this.imageList.concat(newData)
+          if (this.imageList.length === data.data.total) {
             this.hasMoreData = false
           }
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },
-    refreshMaterialList() {
-      this.list = []
+    refreshMaterialList: debounce(function() {
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.imageList = []
       this.requestMoreData()
-    },
+    }, 700, false),
   },
   mounted() {
   }