Everright-filter
0
A query builder component for Vue3. Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date, and time.
Miscellaneous
vuejs
query-builder
query-builder-ui
element-plus
Everright-filter
简体中文 | English
Everright-filter is a user interface that easily generates any type of query statement, making filtering and filtering data a breeze. Provide a variety of UI interfaces to enable different business scenarios.
Features
- 1.Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date and time. Whether you need to filter different types of data, it can meet your needs.
- 2.Provides a wealth of operators, such as equal to, not equal to, greater than, less than, interval, etc., allowing you to flexibly define filtering rules based on specific conditions.
- 3.Provides great flexibility. It supports filtering on date, year, month and day. It also supports the selection of relative time and absolute time, such as today, this week, this month, this year, past N days/hours, future N days/hours, etc. This makes date filtering more flexible and can meet the needs of various time dimensions.
- 4.Support conditional grouping settings, you can use logical operators (AND/OR) to combine multiple conditions to implement complex data filtering logic. Data that meets multiple conditions can be filtered out more precisely to meet the needs of advanced data analysis and mining.
- 5.For behavioral data, it supports setting start and end time, limit times and limit attributes. You can precisely filter out actions that occurred within a specific time period, and further filter based on frequency and attribute conditions.
- 6.Each filter type is extracted and used separately, and can be easily embedded into different UI interfaces. Whether it is a search box, a filter panel or a table header, everright-filter can provide consistent functions and data structures, eliminating the need to develop separate filter functions for different interfaces, saving development resources and time.
- 7.Developers can easily configure the data structure of the required functions according to the document UI interface, saving the tedious manual coding and debugging process.
- 8.Support Chinese and English
Explanation of the different builds
In the dist/ directory of the npm package you will find the different builds
without-element-plus(element-plus is required)Defaultwith-element-plus(Built-in element-plus)
| Excludes element-plus(default) | Includes element-plus(v2.3.3) | |
|---|---|---|
| UMD | EverrightFilter-without-element-plus.umd.cjs | EverrightFilter-with-element-plus.umd.cjs |
| ES | EverrightFilter-without-element-plus.js | EverrightFilter-with-element-plus.js |
| IIFE | EverrightFilter-without-element-plus.iife.js | EverrightFilter-with-element-plus.iife.js |
| css | EverrightFilter-without-element-plus.css | EverrightFilter-with-element-plus.css |
Click Me to see which components are built in
Includes element-plus(v2.3.3)
Based on 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
Examples
- linear
Application Scenario: Suitable for data filtering - matrix
Application Scenario: Suitable for data filtering - quick-search
Application Scenario: Suitable for search - quick-filter
Application Scenario: Suitable for filtering in a column of the list - See examples on codepen
linear、matrix