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页面加载时的进度条功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue实现可拖拽div大小的方法,可封装为全局方法在项目中所需要地方直接调用（mixins），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue3+ts+echarts实现按需引入和类型界定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下2016-10-10
本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了关于vxe-table复选框翻页选中问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue中数据不响应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
如何利用vscode-icons-js在Vue3项目中实现文件图标展示
在开发文件管理系统或类似的项目时,我们常常需要根据文件类型展示对应的文件图标,这样可以提高用户体验,本文将介绍如何在Vue3项目中利用vscode-icons-js库,实现类似VSCode的文件图标展示效果,感兴趣的朋友一起看看吧2024-08-08
这篇文章主要为大家详细介绍了基于canvas实现简易的手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
最新评论