fix: filter option of select comp

suyuan32 · Jul 23, 2024 · 0458200 · 0458200
1 parent ccc2d42
commit 0458200
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/components/Form/src/components/ApiMultipleSelect.vue b/src/components/Form/src/components/ApiMultipleSelect.vue
@@ -6,6 +6,7 @@
     :options="getOptions"
     mode="multiple"
     v-model:value="state"
+    :filter-option="filterOption"
   >
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
@@ -31,6 +32,7 @@
   import { propTypes } from '@/utils/propTypes';
   import { isFunction, omit } from 'remeda';
   import { get } from '/@/utils/object';
+  import { DefaultOptionType, FilterFunc } from 'ant-design-vue/lib/vc-select/Select';
 
   type OptionsItem = { label: string; value: string; disabled?: boolean };
 
@@ -68,6 +70,16 @@
       const emitData = ref<any[]>([]);
       const attrs = useAttrs();
       const { t } = useI18n();
+      const filterOption = ref<boolean | FilterFunc<DefaultOptionType> | undefined>();
+
+      filterOption.value = (inputValue: string, options?: DefaultOptionType): boolean => {
+        if (options) {
+          if (options.label) {
+            return (options.label as string).includes(inputValue);
+          }
+        }
+        return false;
+      };
 
       // Embedded in the form, just use the hook binding to perform form verification
       const [state] = useRuleFormItem(props, 'value', 'change', emitData);
@@ -150,7 +162,7 @@
         emit('change', args);
       }
 
-      return { state, attrs, getOptions, loading, t, handleFetch, handleChange };
+      return { state, attrs, getOptions, loading, t, handleFetch, handleChange, filterOption };
     },
   });
 </script>
diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
@@ -5,10 +5,10 @@
     @change="handleChange"
     :options="getOptions"
     v-model:value="state"
-    :show-search="useSearch"
+    :show-search="true"
     @search="searchFun"
     :show-arrow="false"
-    :filter-option="false"
+    :filter-option="filterOption"
   >
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
@@ -35,6 +35,7 @@
   import { propTypes } from '@/utils/propTypes';
   import { isFunction, omit } from 'remeda';
   import { get } from '/@/utils/object';
+  import { DefaultOptionType, FilterFunc } from 'ant-design-vue/lib/vc-select/Select';
 
   type OptionsItem = { label?: string; value?: string; disabled?: boolean; [name: string]: any };
 
@@ -79,9 +80,20 @@
       const { t } = useI18n();
       const useSearch = props.isSearch;
       const searchFun = ref<any>();
+      const filterOption = ref<boolean | FilterFunc<DefaultOptionType> | undefined>();
 
       if (useSearch) {
         searchFun.value = searchFetch;
+        filterOption.value = false;
+      } else {
+        filterOption.value = (inputValue: string, options?: DefaultOptionType): boolean => {
+          if (options) {
+            if (options.label) {
+              return (options.label as string).includes(inputValue);
+            }
+          }
+          return false;
+        };
       }
 
       // Embedded in the form, just use the hook binding to perform form verification
@@ -212,6 +224,7 @@
         handleChange,
         useSearch,
         searchFun,
+        filterOption,
       };
     },
   });