vue3.2 antd 使用Select组件的搜索filterOption

最新推荐文章于 2024-05-28 14:54:17 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-05-28 14:54:17 发布

阅读量2.6k

点赞数

分类专栏：个人项目 vue+ vite + antdv 文章标签： antd select vue3.2 show-search fiterOption

本文链接：https://blog.csdn.net/agua001/article/details/124454988

版权

个人项目同时被 2 个专栏收录

144 篇文章 5 订阅

订阅专栏

vue+ vite + antdv

29 篇文章 3 订阅

订阅专栏

1、一定要记得先打印 filterOption 方法的参数出来看数据结构哦，不要盲目复制文档的代码

<a-form-item label="测站编码" v-bind="validateInfos.stationId">
  <a-select
    placeholder="请选择测站编码"
    v-model:value="formData.stationId"
    show-search
    :filterOption="filterOption"
    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
    @select="getDeviceNum"
    :disabled="(actionType != 'a') && (actionType != 'c')"
  >
    <a-select-option
      :value="item.id"
      v-for="item in state.siteCodeList"
      :key="item.id"
    >
      {{ item.stationName }}
    </a-select-option>
  </a-select>
</a-form-item>
const filterOption = (input, option) => {
  console.log(input, option);
  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};