antd pro of vue:a-select多选加搜索框

antd a-select多选加搜索框

目录

antd a-select多选加搜索框

---

1.实现效果 ：在多选框中输入内容会匹配符合条件的列表展示在下拉框中

<a-select
                  :value="nowProduct"
                  placeholder="查看全部"
                  mode="multiple"
                  @change="onProductChange"
                  show-search
                  :filter-option="filterOption"
                  option-filter-prop="children"
                  :autoClearSearchValue="false"
                >
                  <a-select-option v-for="item in productType" :key="item.product_name" :value="item.product_id">
                    {{ item.product_name }}
                  </a-select-option>
                </a-select>

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

2.关键配置项

                  show-search                                  使单选模式可搜索

                  :filter-option="filterOption"             是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。

                  option-filter-prop="children"           搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索

                  :autoClearSearchValue="false"     最重要！！！!!!是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。(否则输入关键字后只能选择一个选项就被清空)