vue+element ui表格添加多个搜索条件筛选功能(前端查询)
更新时间：2023年08月03日 10:59:11 作者：yuwenwenwenwenyu
这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用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+element ui表格添加多个搜索条件筛选功能的文章就介绍到这了,更多相关elementui表格搜索多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue router-link下划线和颜色问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
electron-vue+electron-updater实现自动更新(步骤源码)
这篇文章主要介绍了electron-vue+electron-updater实现自动更新,步骤源码包括autoUpdater.js操控更新js文件，main.js也就是package.json内的main指向的js文件，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
Vue-typed-js是一个用于Vue.js的Typed.js集成插件,它可以创建打字动画效果,这篇文章主要介绍了Vue-Typed-JS打字动画效果实现的相关资料,文中将插件的安装及使用介绍的非常详细,需要的朋友可以参考下2025-08-08
这篇文章主要介绍了vue下拉列表的两种实现方式比较，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue2.0基于vue-cli+element-ui制作树形treeTable
这篇文章主要介绍了vue2.0基于vue-cli+element-ui制作树形treeTable，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。2018-02-02
这篇文章主要介绍了vuex的module模块用法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论