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.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下
2023-02-02
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
这篇文章主要给大家介绍了关于Vue.js桌面端自定义滚动条组件之美化滚动条VScroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
vuejs中使用mixin局部混入/全局混入的方法详解
混入可以省很多代码(高类聚低耦合),还方便维护,下面这篇文章主要给大家介绍了关于vuejs中使用mixin局部混入/全局混入的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
vue中el-table格式化el-table-column内容的三种方法
本文主要介绍了vue中el-table格式化el-table-column内容的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
茶余饭后聊聊Vue3.0响应式数据那些事儿
这篇文章主要介绍了茶余饭后聊聊Vue3.0响应式数据那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
基于Vue实现文件拖拽上传功能
文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧
2024-03-03
vue使用jsMind思维导图的实战指南
jsMind是一个显示/编辑思维导图的纯javascript类库,其基于 html5的canvas进行设计,这篇文章主要给大家介绍了关于vue使用jsMind思维导图的相关资料,需要的朋友可以参考下
2023-01-01
详解Vue.js 可拖放文本框组件的使用
这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
解决vue初始化项目一直停在downloading template的问题
这篇文章主要介绍了解决vue初始化项目一直停在downloading template的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
JS 实现获取对象属性个数的方法小结
这篇文章主要介绍了JS 实现获取对象属性个数的方法,结合实例形式总结分析了JS 获取对象属性个数的三种常用方法,需要的朋友可以参考下
2023-05-05