vue+element ui 表格添加多个搜索条件筛选（前端查询）

vue+element ui 表格添加多个搜索条件筛选（前端查询）

当数据量小的时候，可以在前端完成搜索查询的功能，核心代码如下：
点击查询按钮调用下面的方法

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 为筛选后的数据，可以重新给tableData赋值，赋值后如果遇到表格数据不刷新的情况，可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。

<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 }