vue3 中 使用 antd中的select 组件的带搜索框 展开后可对选项进行筛选搜索功能

鼠标进入以后下拉显示:
在这里插入图片描述
输入字符串以后:
在这里插入图片描述
可以看出对数据进行了筛选。

具体代码:

   结构上:
     <a-select
            v-model:value="formState.formFlow"
            show-search
            allowClear
            placeholder="输入选择流程"
            :options="options"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            :filter-option="filterOption"
          />

js:
  const options = ref([]);

  /**
   * 输入选择器--change事件
   * */
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  /**
   * 输入选择器--blur事件
   * */
  const handleBlur = () => {
    console.log('blur');
  };
  /**
   * 输入选择器--focus事件
   * */
  const handleFocus = () => {
    console.log('focus');
  };
  /**
   * 输入选择器--对数据进行筛选
   * */
  const filterOption = (input, option) => {
    let value = option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    return value;
  };
    /**
   * 生命周期--onMounted
   * 在实例创建完成后调用,此时数据观测和事件配置已完成,DOM 已经渲染完成。
   * */
  onMounted(() => {
    console.log('onMounted ');
	//请求接口
    _getFlowlist();
  });
  /**
   * 数据初始化
   * 获取流程列表
   * */
  const _getFlowlist = () => {
    console.log('获取流程列表');
    //API请求
    getFlowlist().then((res) => {
      console.log(res, 'res');
      options.value = res;
    });
  };
要在Vue 3和Ant Design使用Select组件实现可输入、可选择、输入之后筛选模糊搜索功能,可以结合Ant Design的AutoComplete组件Select组件来实现。 首先,确保你已经安装了Vue 3和Ant Design,并正确引入它们。 然后,创建一个名为"FuzzySearchSelect"的组件,并在template部分编写组件的结构和样式。在data定义一个空数组来存储搜索结果。在methods定义一个方法来处理输入框的搜索操作。 ```vue <template> <a-select v-model:value="selectedValue" mode="tags" :filter-option="false"> <a-auto-complete v-model:value="inputValue" :options="filteredOptions" @search="handleSearch" placeholder="请输入搜索内容" ></a-auto-complete> </a-select> </template> <script> import { ref, computed } from 'vue'; import { Select, AutoComplete } from 'ant-design-vue'; export default { components: { 'a-select': Select, 'a-auto-complete': AutoComplete, }, data() { return { inputValue: '', selectedValue: [], options: [], // 所有选项 }; }, computed: { filteredOptions() { return this.options.filter(option => option.toLowerCase().includes(this.inputValue.toLowerCase()) ); }, }, methods: { handleSearch(value) { // 模拟异步请求获取选项数据 setTimeout(() => { this.options = ["选项1", "选项2", "选项3", "选项4"]; }, 1000); }, }, }; </script> ``` 在这个示例,我们使用了Ant Design的Select和AutoComplete组件来实现可输入、可选择和模糊搜索功能组件包含一个Select组件使用v-model:value绑定选择的值,并设置mode为"tags"以支持可输入的标签模式。在Select组件内部,嵌套了一个AutoComplete组件,用于实现输入框的自动补全和模糊搜索。在AutoComplete组件,我们使用v-model:value绑定输入框的值,通过@search事件监听输入框的搜索操作,并调用handleSearch方法进行搜索。 在handleSearch方法,我们可以根据实际需求进行异步请求获取选项数据,并将数据赋值给options数组。filteredOptions计算属性根据输入框的值对options进行模糊匹配,返回匹配结果供选择。 希望这个示例能够帮助你实现你的需求!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值