a-select多選前提下 通過 filterOption 篩選 value

Ant Design 官方文檔

是否根據(jù)輸入項(xiàng)進(jìn)行篩選。當(dāng)其為一個函數(shù)時,會接收 inputValue option 兩個參數(shù),當(dāng) option 符合篩選條件時,應(yīng)返回 true,反之則返回 false。

是不是看的有點(diǎn)懵,我們通過篩選,發(fā)現(xiàn)是經(jīng)過key篩選的,而我們界面上顯示的是value,我們想要的是通過value篩選,那么就把下面這行代碼加上報

:filterOption="(input, option) =>{                    
  return option.componentOptions.children[0].text.includes(input)
}"

部分代碼

<a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 22 }">
            <a-select
              mode="multiple"
              style="width: 100%;"
              v-decorator="[
                'inspectUserIds',
                {
                  rules: [{ required: true, message: '請選擇巡檢人員' }],
                  initialValue: []
                },
              ]"
              :filterOption="(input, option) =>{                    
                return option.componentOptions.children[0].text.includes(input)
              }"
              placeholder="請選擇巡檢人員"
            >
              <a-select-option v-for="item in members" :key="item.userId">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容