前端实现多条件检索/查询/筛选

置顶前端小浩

已于 2024-02-29 14:42:03 修改

阅读量1.4k

点赞数 10

文章标签：前端

于 2024-02-29 14:24:04 首次发布

本文链接：https://blog.csdn.net/qq_59224836/article/details/136370071

版权

本文介绍了在项目开发中，当数据量较小的页面需要前端实现过滤功能时，如何使用JavaScript的filter方法结合对象遍历，通过自定义filterFunc函数对表格数据进行筛选，并将筛选后的数据赋值给表格的示例代码。

摘要由CSDN通过智能技术生成

一般项目中数据量小的页面难免会遇到前端实现过滤，如下图

代码实现：在请求数据后使用filter实现过滤效果


getTableData() {
    queryPostGis().then((res) => {
          // 备份了一下数据
        let arr = res.items;
        // 通过遍历key值来循环处理
        Object.keys(this.form).forEach(e => {
        // 调用自己定义好的筛选方法
          arr = this.filterFunc(this.form[e], e, arr);
        });
        // 为表格赋值
        this.tableData = arr;

    }).catch((err) => { });
},

filterFunc(val, target, filterArr) {
      // 参数不存在或为空时，就相当于查询全部
    if (val == undefined || val == '') {
        return filterArr;
    }
    return filterArr.filter(p => String(p[target]).indexOf(val) > -1); // 可以自己加一个.toLowerCase()来兼容一下大小
},