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