antd-vue でドロップダウン選択ボックス検索が失敗する問題

antd-vue でドロップダウン選択ボックス検索が失敗する問題

こんにちは、最近開発中のantd-vue(vue3+TS)でドロップダウン式の選択ボックスに遭遇しました.公式ドキュメントを読めば実現できるとのケースですが、この選択ボックスには独自の検索機能があり、検索は関数は最終的に失敗します。図に示すように、ドロップダウン ボックスを検索できます。

しかし、検索は失敗します。

それを修正するにはどうすればよいでしょうか?
1. まず、コードを理解しましょう。

//结构:
      <a-select
            v-model:value="userOption"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择用户"
            :options="userOptionArr"
            @change="optionChange"
            :showArrow="true"
            optionFilterProp="label"
          >
      </a-select>
//解释：
v-model:value	//默认选中的元素 当mode="multiple"时，值是数组。
 mode="multiple"//多选
 :options="userOptionArr"//下拉选择狂的选项。
   @change="optionChange"//选择框变化触发的事件
   :showArrow="true"//显示箭头
   optionFilterProp="label"//重点！！！搜索时过滤对应的 option 属性，不支持 children

上記の詳細を理解していない場合は、公式ドキュメント (ここ)を見て、問題を解決するための鍵を説明することに焦点を当てましょう。

optionFilterProp="label"
//官方说的是搜索时过滤对应的 option 属性，不支持 children
//意思就是当输入内容时会对下拉框做一个过滤操作。
//那么该属性有两个值：label和value(默认)。
//我们的下拉框绑定的数据是这样的:数据由value(值)和label(下拉框展示的标签)组成:我们之前之所以搜索失效是因为我们的过滤是按照value来的。
    const userOptionArr= ref([
     [
          {
    
    
            value: 'fgfjdh',
            label: 'admin',
          },
          {
    
    
            value: 'dfsdfd',
            label: 'dragon',
          },
     ],

解決策:
したがって、optionFilterProp の値を label に設定するだけで済みます。

optionFilterProp="label"

成功画像: