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