增加搜索

src/views/system/Department/bank.vue

@@ -47,8 +47,9 @@
         <el-input v-model="FormData.qa_password" style="width: 60%;"  />
       </el-form-item>
          <el-form-item label="不允许重复" :label-width="formLabelWidth" prop="is_repeat"   >
-        <el-select v-model="repeat_qa_id" placeholder="请选择" multiple  style="width: 60%;"   >
+        <el-select v-model="repeat_qa_id" placeholder="请选择" multiple  filterable
-            <el-option v-for="item in qaList" :key="item.qa_id" :label="item.qa_name" :value="item.qa_id"    />
+        remote  remote-show-suffix    :remote-method="remoteMethod"    style="width: 60%;"   >
+            <el-option v-for="item in options" :key="item.qa_id" :label="item.qa_name" :value="item.qa_id"    />
           </el-select>
       </el-form-item>
       <el-form-item label="是否开启计时器" :label-width="formLabelWidth" prop="is_turn_timer">
@@ -230,9 +231,11 @@ const rules = reactive({
   })
 const repeat_qa_id=ref([])
 const qaList=ref([])
+const options = ref([])
 const dialogImageUrl = ref("");
 const dialogVisiblei = ref(false);
 const feihua = ref(false);
+const suffix = ref(true);
 const question_times=ref(
   {
     type1:'',
@@ -317,7 +320,7 @@ request.postQaList().then((res) => {
      const newList = res.data.data.filter(item => item.qa_id !== props.qa_id);
       qaList.value =[]
        qaList.value = [...newList]
-      
+      options.value = qaList.value
   })
 }
 
@@ -692,6 +695,20 @@ request.getOssSign({
       feihua.value=false
     }
   }
+
+  const remoteMethod = (query) => {
+  if (query) {
+  
+    setTimeout(() => {
+    
+      options.value = qaList.value.filter((item) => {
+        return item.qa_name.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 200)
+  } else {
+    options.value = qaList.value
+  }
+}
 </script>
 <style scoped>
 ::v-deep input::-webkit-outer-spin-button,

src/views/system/Department/banktwo.vue

@@ -54,8 +54,9 @@
         <el-switch v-model="FormData.is_repeat"  :active-value="1" :inactive-value="0"  />
       </el-form-item> -->
         <el-form-item label="不允许重复" :label-width="formLabelWidth" prop="is_repeat"   >
-        <el-select v-model="repeat_qa_id" placeholder="请选择" multiple  style="width: 60%;"  >
+        <el-select v-model="repeat_qa_id" placeholder="请选择" multiple  filterable
-            <el-option v-for="item in qaList" :key="item.qa_id" :label="item.qa_name" :value="item.qa_id"    />
+        remote  remote-show-suffix    :remote-method="remoteMethod"    style="width: 60%;"  >
+            <el-option v-for="item in options" :key="item.qa_id" :label="item.qa_name" :value="item.qa_id"    />
           </el-select>
       </el-form-item>
       <el-form-item label="是否开启计时器" :label-width="formLabelWidth" prop="is_turn_timer">
@@ -305,6 +306,7 @@ const action=ref(1)
 const isfirst=ref(true)
 const base_token_item=ref([])
 const repeat_qa_id=ref([])
+const options = ref([])
 const qaList=ref([])
 function onSubmit() {
   if(quantitynumber.value<props.FormData.token_num)
@@ -719,9 +721,22 @@ request.postQaList().then((res) => {
         const newList = res.data.data.filter(item => item.qa_id !== props.qa_id);
         qaList.value =[]
         qaList.value = [...newList]
+         options.value = qaList.value
   })
 }
+  const remoteMethod = (query) => {
+  if (query) {
   
+    setTimeout(() => {
+    
+      options.value = qaList.value.filter((item) => {
+        return item.qa_name.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 200)
+  } else {
+    options.value = qaList.value
+  }
+}
 </script>
 <style scoped>
 ::v-deep input::-webkit-outer-spin-button,