0


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 
}
标签: vue.js 前端 ui

本文转载自: https://blog.csdn.net/yuwenwenwenwenyu/article/details/131307046
版权归原作者 yuwenwenwenwenyu 所有, 如有侵权,请联系我们删除。

“vue+element ui 表格添加多个搜索条件筛选(前端查询)”的评论:

还没有评论