vue+element?ui表格添加多個搜索條件篩選功能(前端查詢)
更新時間：2023年08月03日 10:59:11 作者：yuwenwenwenwenyu
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,需要的朋友可以參考下
當(dāng)數(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 router-link下劃線和顏色問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
electron-vue+electron-updater實現(xiàn)自動更新(步驟源碼)
這篇文章主要介紹了electron-vue+electron-updater實現(xiàn)自動更新,步驟源碼包括autoUpdater.js操控更新js文件，main.js也就是package.json內(nèi)的main指向的js文件，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
本文主要介紹了elementUI中使用formdata進行上傳文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue-typed-js是一個用于Vue.js的Typed.js集成插件,它可以創(chuàng)建打字動畫效果,這篇文章主要介紹了Vue-Typed-JS打字動畫效果實現(xiàn)的相關(guān)資料,文中將插件的安裝及使用介紹的非常詳細,需要的朋友可以參考下2025-08-08
這篇文章主要介紹了vue下拉列表的兩種實現(xiàn)方式比較，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue2.0基于vue-cli+element-ui制作樹形treeTable
這篇文章主要介紹了vue2.0基于vue-cli+element-ui制作樹形treeTable，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vant的基礎(chǔ)上實現(xiàn)添加表單驗證框架的方法示例
這篇文章主要介紹了在Vant的基礎(chǔ)上實現(xiàn)添加驗證框架的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對此有興趣的朋友可以學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11