vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
更新時間：2023年12月19日 11:30:20 作者：他在時間門外
這篇文章主要給大家介紹了關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關(guān)資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
基本使用
我們都知道Element-Plus中Select有個很好用的屬性是filterable，在Select中添加即可使用，他會開啟一個搜索功能
自定義查詢或者獲取下拉框輸入值
當(dāng)我們不想使用它默認(rèn)的搜索方式，或者獲取到下拉框中輸入的值時，我們就可以使用filter-method來實現(xiàn)，注意使用filterable后在使用filter-method的話filterable會失效，但是不加上filterable下拉框會輸入不了值，所以還是要搭配使用
下拉框：
<el-select
v-model="form.outTruckId"
placeholder=" "
filterable
clearable
:filter-method="outTruckinput"
@clear="outclear"
v-if="scope.row.action == 'edit'"
>
<el-option
v-for="item in OutTruckOptionList"
:key="item.keyCode"
:label="item.valueCode"
:value="item.keyCode"
/>
</el-select>
函數(shù)
// 獲取下拉框的輸入值
function outTruckinput(e) {
// 自定義查詢方法
let list = ref();
list.value = OutTruckOptionList.value;
if (e) {
OutTruckOptionList.value = list.value.filter((item) => {
return item.valueCode.indexOf(e) > -1;
});
} else {
//刷新下拉列表
console.log("刷新下拉列表,重新給OutTruckOptionList.value賦值");
}
}總結(jié)
到此這篇關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的文章就介紹到這了,更多相關(guān)Select下filter-method屬性使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了vue插件及修改ip啟動端口的解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
本篇文章主要介紹了淺談vue項目可以從哪些方面進(jìn)行優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下2022-10-10
vue composition-api 封裝組合式函數(shù)的操作方法
在 Vue 應(yīng)用的概念中，“組合式函數(shù)”(Composables) 是一個利用 Vue 的組合式 API 來封裝和復(fù)用有狀態(tài)邏輯的函數(shù)，這篇文章主要介紹了vue composition-api 封裝組合式函數(shù)的操作方法,需要的朋友可以參考下2022-10-10
vue實現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)等功能
這篇文章主要介紹了vue實現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)等功能,需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關(guān)于如何通過一個簡單的例子學(xué)會vuex與模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11