快捷導(dǎo)航

vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)

更新時(shí)間：2023年08月03日 10:59:11 作者：yuwenwenwenwenyu

這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問(wèn)題,需要的朋友可以參考下

當(dāng)數(shù)據(jù)量小的時(shí)候，可以在前端完成搜索查詢的功能，核心代碼如下：

點(diǎn)擊查詢按鈕調(diào)用下面的方法

handleSearch() {
    // 表單數(shù)據(jù)格式
    // searchForm:{field1:'11',field2:'22'}
    let form = this.searchForm;
    // 表格數(shù)據(jù)源
    let tableList = this.tableData;
    // 篩選后的數(shù)據(jù)
    const filterList = tableList.filter((item) => {
         return Object.values(form).every((key, index) => {
             return item[Object.keys(form)[index]].includes(key)
         })
    })
    this.tableData = filterList 
}

filterList 為篩選后的數(shù)據(jù)，可以重新給tableData賦值，賦值后如果遇到表格數(shù)據(jù)不刷新的情況，可以給table加上一個(gè)隨機(jī)的key。這樣可以解決重新賦值頁(yè)面不刷新的情況。

<el-table class="table" :data="tableData" :key="itemKey"></el-table>
handleSearch() {
    this.itemKey = Math.random();
    // 表單數(shù)據(jù)格式
    // searchForm:{field1:'11',field2:'22'}
    let form = this.searchForm;
    // 表格數(shù)據(jù)源
    let tableList = this.tableData;
    // 篩選后的數(shù)據(jù)
    const filterList = tableList.filter((item) => {
         return Object.values(form).every((key, index) => {
             return item[Object.keys(form)[index]].includes(key)
         })
    })
    this.tableData = filterList 
}

總結(jié)

到此這篇關(guān)于vue+element ui表格添加多個(gè)搜索條件篩選功能的文章就介紹到這了,更多相關(guān)elementui表格搜索多條件篩選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue頁(yè)面加載時(shí)的進(jìn)度條功能(實(shí)例代碼)
這篇文章主要介紹了vue頁(yè)面加載時(shí)的進(jìn)度條功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
vue實(shí)現(xiàn)可拖拽div大小的方法
這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-04-04
Vue?列表過(guò)濾與排序的實(shí)現(xiàn)
這篇文章主要介紹了Vue?列表過(guò)濾與排序的實(shí)現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下
2022-05-05
vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下
2016-10-10
Uniapp 實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換功能(詳細(xì)步驟)
本文介紹了如何在UniApp中實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換功能,u-tab-bar組件提供了便捷的標(biāo)簽切換功能和豐富的樣式選項(xiàng),而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實(shí)現(xiàn)頂部標(biāo)簽頁(yè)切換,感興趣的朋友一起看看吧
2025-02-02
關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決
這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
如何利用vscode-icons-js在Vue3項(xiàng)目中實(shí)現(xiàn)文件圖標(biāo)展示
在開發(fā)文件管理系統(tǒng)或類似的項(xiàng)目時(shí),我們常常需要根據(jù)文件類型展示對(duì)應(yīng)的文件圖標(biāo),這樣可以提高用戶體驗(yàn),本文將介紹如何在Vue3項(xiàng)目中利用vscode-icons-js庫(kù),實(shí)現(xiàn)類似VSCode的文件圖標(biāo)展示效果,感興趣的朋友一起看看吧
2024-08-08
基于canvas實(shí)現(xiàn)手寫簽名（vue）
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)簡(jiǎn)易的手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05