react多条件查询

简介: react多条件查询

1、声明一个filter常量

2.filter接受(condition,data)两个参数

3、调用data里面的filter进行筛选

4、任意一个item当筛选条件

5、使用object.key获取对象所有key

6、对每个key使用Array.prototype.every()方法判断是否满足条件

7、将key转为字符串或小写

8、使用String.prototype.includes()检查是否有筛选条件值

9、返回最终结果

const filter =
      (condition, data) => {
          return data.filter
            ((item: { [x: string]: any }) => {
                return Object.keys
                    (condition).every((key) => {
                      return String(item[key])
                        .toLowerCase()
                            .includes(String(condition[key]).trim().toLowerCase());
                    });
              });
        };

相关文章
|
7月前
|
JavaScript 前端开发
Vue实现模糊查询
Vue实现模糊查询
124 1
|
7月前
|
资源调度 前端开发 API
react select
react select
react-withRouter 用法
react-withRouter 用法
131 0
|
3月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
102 2
react对antd中Select组件二次封装
|
3月前
|
存储 移动开发 前端开发
初探react,用react实现一个todoList功能
该文章通过创建一个TodoList应用来介绍React的基础知识,包括环境搭建、组件创建、状态管理和事件处理,并演示了如何使用React Hooks来优化组件逻辑。
|
存储 前端开发 JavaScript
React Memo不是你优化的第一选择(二)
React Memo不是你优化的第一选择(二)
|
JSON 前端开发 JavaScript
React Memo不是你优化的第一选择(一)
React Memo不是你优化的第一选择(一)
|
7月前
|
JavaScript
vue多条件查询
vue多条件查询
79 0
|
7月前
|
前端开发
react 表格
react 表格
|
存储 前端开发 JavaScript
React | React的JSX语法(二)
React | React的JSX语法(二)
React | React的JSX语法(二)