vue+element?ui表格添加多個搜索條件篩選功能(前端查詢)
更新時間：2023年08月03日 10:59:11 作者：yuwenwenwenwenyu
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,需要的朋友可以參考下
當數(shù)據(jù)量小的時候，可以在前端完成搜索查詢的功能，核心代碼如下：
點擊查詢按鈕調(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加上一個隨機的key。這樣可以解決重新賦值頁面不刷新的情況。
<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表格添加多個搜索條件篩選功能的文章就介紹到這了,更多相關(guān)elementui表格搜索多條件篩選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue頁面加載時的進度條功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue實現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項目中所需要地方直接調(diào)用（mixins），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue?列表過濾與排序的實現(xiàn)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-05-05
vue3+ts+echarts實現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
Uniapp 實現(xiàn)頂部標簽頁切換功能(詳細步驟)
本文介紹了如何在UniApp中實現(xiàn)頂部標簽頁切換功能,u-tab-bar組件提供了便捷的標簽切換功能和豐富的樣式選項,而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實現(xiàn)頂部標簽頁切換,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了關(guān)于vxe-table復選框翻頁選中問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中數(shù)據(jù)不響應(yīng)的問題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
如何利用vscode-icons-js在Vue3項目中實現(xiàn)文件圖標展示
在開發(fā)文件管理系統(tǒng)或類似的項目時,我們常常需要根據(jù)文件類型展示對應(yīng)的文件圖標,這樣可以提高用戶體驗,本文將介紹如何在Vue3項目中利用vscode-icons-js庫,實現(xiàn)類似VSCode的文件圖標展示效果,感興趣的朋友一起看看吧2024-08-08
這篇文章主要為大家詳細介紹了基于canvas實現(xiàn)簡易的手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05