Ant Design Vue 搜索下拉框

`filter-option` 是 Ant Design Vue 中 `<a-select>` 组件的一个属性,用于自定义选项的过滤规则。当用户在下拉框中输入内容进行搜索时,`filter-option` 属性可以指定一个方法来根据输入内容过滤选项。

具体来说,当用户输入内容时,`filter-option` 属性会调用指定的方法来处理输入内容和每个选项,根据返回的结果来决定是否显示该选项。如果返回 `true`,则显示该选项;如果返回 `false`,则过滤掉该选项,不显示在下拉框中。

在您提供的代码中,`filter-option="handleFilterOption"` 就是将 `<a-select>` 组件的 `filter-option` 属性设置为名为 `handleFilterOption` 的方法。这个方法接收两个参数:`input` 是用户输入的搜索内容,`option` 是下拉框中的选项对象。在这个方法中,您可以根据自己的业务逻辑来决定如何处理搜索过滤。

例如,您可以使用 `input.toLowerCase()` 将搜索内容转换为小写,然后使用 `option.label.toLowerCase()` 将选项的文本内容也转换为小写,最后使用 `includes()` 方法来判断是否包含搜索内容。如果匹配成功,返回 `true`;否则返回 `false`,表示不显示该选项。

这样,通过设置 `filter-option` 属性并指定一个合适的方法,您就可以实现自定义的搜索过滤规则,让 `<a-select>` 组件具有更灵活和符合实际需求的搜索功能。

复制代码
<a-form-item name="communityName">
  <template #label><span title="社区名称">社区名称</span></template>
  <a-select
    v-model:value="queryParam.communityName"
    mode="default"
    style="width: 100%"
    placeholder="请选择社区名称"
    :options="title"
    @change="handleChange"
    :filter-option="handleFilterOption"
    show-search="show-search"
    >
  </a-select>
复制代码
onMounted(async () => {
  try {
    // 发送 HTTP 请求到后端接口获取数据
    const response = optionslist();
    response.then((data) => {
      // 在这里处理获取到的数据
      options.value = data;
      console.log('获取到的数据为:', options.value);

      // 提取每个对象的 title 属性的值组成新数组
      title.value = options.value.map(option => ({
        value: option.id,
        label: option.title,
      }));
      console.log('title获取到的数据为:', title.value);

    }).catch((error) => {
      // 在这里处理获取数据失败的情况
      console.error('获取数据失败:', error);
    });

    // 从响应数据中提取选项列表,假设后端返回的数据是一个包含选项的数组
    // const data = response.data;

    // 更新 options 的值为从后端接口获取的数据
    // options.value = data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});
const handleFilterOption = (input: string, option: { label: string; value: string }) => {
  return option.label.toLowerCase().includes(input.toLowerCase());
};
相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter