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。這樣可以解決重新賦值頁面不刷新的情況。文章來源地址http://www.zghlxwxcb.cn/news/detail-559534.html
<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
}
文章來源：http://www.zghlxwxcb.cn/news/detail-559534.html
到了這里，關于vue+element ui 表格添加多個搜索條件篩選（前端查詢）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
