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ù)中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
基本使用
我們都知道Element-Plus中Select有個很好用的屬性是filterable，在Select中添加即可使用，他會開啟一個搜索功能
自定義查詢或者獲取下拉框輸入值
當我們不想使用它默認的搜索方式，或者獲取到下拉框中輸入的值時，我們就可以使用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左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
vue如何實現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue v-for 點擊當前行,獲取當前行數(shù)據(jù)及event當前事件對象的操作
這篇文章主要介紹了vue v-for 點擊當前行,獲取當前行數(shù)據(jù)及event當前事件對象的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vuepress打包之后頁面樣式丟失問題的兩種解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
文章介紹了在使用Vite+Vue3項目打包時遇到的自定義圖標偶爾亂碼問題的解決方法,通過研究vite.config.js的配置項,發(fā)現(xiàn)將cssMinify設置為false可以解決圖標亂碼問題,同時并不會顯著增加打包文件的大小2025-12-12
Vue3公布曾經(jīng)有一段時間了,它采納了新的響應式零碎,而且構(gòu)建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關(guān)于Vue3新狀態(tài)管理工具的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章介紹了解決vue路由組件vue-router實例被復用的問題，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要為大家詳細介紹了vue定義模態(tài)框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07