Query-filter是一个通过用户界面轻松生成任何类型的查询语句，使得筛选和过滤数据变得轻而易举。提供多种UI界面，赋能不同的业务场景。

Features

• 1.支持多种数据类型的筛选，包括字符串、数字、下拉、级联、地区、日期和时间。无论你需要对不同类型的数据进行筛选，都能满足你的需求。
• 2.提供了丰富的操作符，如等于、不等于、大于、小于、区间等，让你能够根据具体条件灵活地定义筛选规则。
• 3.提供了极大的灵活性。它支持对日期、年、月和日进行筛选。还支持相对时间和绝对时间的选择，如今日、本周、本月、今年、过去N天/小时、未来N天/小时等。这使得日期筛选更加灵活，能够满足各种时间维度的需求。
• 4.支持条件的分组设置，可以通过使用逻辑运算符（AND/OR）组合多个条件，实现复杂的数据筛选逻辑。可以更精确地筛选出符合多个条件的数据，满足高级数据分析和挖掘的需求。
• 5.针对行为数据，支持设置起止时间、限制次数和限制属性。你可以精确地筛选出特定时间段内发生的行为，并根据次数和属性条件进行进一步过滤。
• 6.每个筛选类型单独抽离出来使用，可以轻松嵌入到不同的UI界面中。无论是搜索框、筛选面板还是表格的表头，everright-filter都能提供一致的功能和数据结构，无需为不同界面单独开发筛选功能，节省了开发资源和时间。
• 7.开发人员可以根据文档UI界面轻松配置所需功能的数据结构，节省了繁琐的手动编码和调试过程。
• 8.支持中文和英文

Explanation of the different builds

在 npm 包的 dist 目录会找到两种构建版本

• without-element-plus(需提供element-plus) Default
• with-element-plus(内置element-plus)

| | Excludes element-plus(default) | Includes element-plus(v2.3.3) | | ------------- | ------------- | ------------- | | UMD | QueryFilter-without-element-plus.umd.cjs | QueryFilter-with-element-plus.umd.cjs | | ES | QueryFilter-without-element-plus.js | QueryFilter-with-element-plus.js | | IIFE | QueryFilter-without-element-plus.iife.js | QueryFilter-with-element-plus.iife.js | | css | QueryFilter-without-element-plus.css | QueryFilter-with-element-plus.css |

Includes element-plus(v2.3.3)

基于 ES modules 的 tree shaking

| element-plus components | |------------------| | ElButton | | ElCascader | | ElCheckbox | | ElCheckboxGroup | | ElDatePicker | | ElIcon | | ElInput | | ElInputNumber | | ElOption | | ElPopover | | ElScrollbar | | ElSelect | | ElSwitch | | ElTabPane | | ElTabs | | ElTag | | ElTimePicker | | ElTooltip | | vLoading |

Docs

• Get Started
• Docs

Examples

• linear 应用场景: 适用于数据筛选
• matrix 应用场景: 适用于数据筛选
• quick-search 应用场景: 适用于搜索
• quick-filter 应用场景: 适用于在列表某一列筛选
• See examples on codepen linear、matrix

Sample screenshot

text

number

time

date

cascader

select

linear

matrix

quick-search

quick-filter

原作者:https://github.com/Liberty-liu/Everright-filter