Vue+element ui table adds multiple search conditions to filter (front-end query)
When the amount of data is small, the search query function can be completed on the front end. The core code is as follows:
Click the query button to call the following method
handleSearch() {
// 表单数据格式
// searchForm:{field1:'11',field2:'22'}
let form = this.searchForm;
// 表格数据源
let tableList = this.tableData;
// 筛选后的数据
const filterList = tableList.filter((item) => {
return Object.values(form).every((key, index) => {
return item[Object.keys(form)[index]].includes(key)
})
})
this.tableData = filterList
}
filterList is the filtered data, you can re-assign tableData, if the table data is not refreshed after assignment, you can add a random key to the table. This can solve the situation that the reassignment page does not refresh.
<el-table class="table" :data="tableData" :key="itemKey"></el-table>
handleSearch() {
this.itemKey = Math.random();
// 表单数据格式
// searchForm:{field1:'11',field2:'22'}
let form = this.searchForm;
// 表格数据源
let tableList = this.tableData;
// 筛选后的数据
const filterList = tableList.filter((item) => {
return Object.values(form).every((key, index) => {
return item[Object.keys(form)[index]].includes(key)
})
})
this.tableData = filterList
}