当前位置: 首页 > news >正文

数据权限的设计与实现系列5——前端筛选器组件Everright-filter介绍

背景

根据先前的设计思路,通过前端配置规则,来实现数据权限组合条件设置,因此需要一个功能相对完善的前端数据筛选器组件。自己实现的,难度和工作量不小,
通过资料查询,选择了与平台技术栈(基于 vue3 和 element plus)一致的组件 Everright-filter。

顺便提一下,数据权限基于实体属性元数据的控制,实际可用来实现另一个业务场景:自定义查询(或称之为高级查询),即在业务实体的列表页面,用户不是仅仅使用系统预置的几个有限的条件,而是可以自己去灵活组合各种查询条件,并保存为查询方案,从而满足不同业务岗位不同的查询需求。

简介

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

官网介绍:https://everright.site/filter/introduction.html
文档地址:https://everright.site/filter/started.html
Gitee 地址:https://gitee.com/Liberty_liu/Everright-filter

注:官方文档中不少demo地址打不开或报错了。‍

主要功能

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

安装

该组件要求

  • vue >= 3
  • element-plus >= 2.3.1

看了下平台,vue3 版本肯定是符合要求的,element-plus 版本是 2.2.32,低于要求,修改 package.json 版本号到 2.3.1,执行 pnpm i 命令。

然后执行如下命令,安装 everright-filter 组件

pnpm install everright-filter

应用场景

官方按业务场景,演示了组件的四种模式,具体如下:

  • linear 适用于数据筛选,只有一个逻辑组,组内可以添加多个条件,组内条件可以设置关系是 and 还是 or。
  • matrix 适用于数据筛选,可以设置多个逻辑组,不仅组内条件可以设置关系是 and 还是 or,组间也可以设置关系是 and 还是 or。
  • quick-search 适用于搜索
  • quick-filter 适用于在列表某一列筛选


基于我们的需求,应该选用第二种场景,可以多个逻辑组,从而为规则配置提供最大的灵活度。

开源平台资料

平台名称:一二三开发平台
简介: 企业级通用开发平台
设计资料:[csdn专栏]
开源地址:[Gitee]
开源协议:MIT
如果您在阅读本文时获得了帮助或受到了启发,希望您能够喜欢并收藏这篇文章,为它点赞~
请在评论区与我分享您的想法和心得,一起交流学习,不断进步,遇见更加优秀的自己!


http://www.mrgr.cn/news/17655.html

相关文章:

  • HTB-Three(云服务)
  • 气膜体育馆:学校体育设施的全新选择—轻空间
  • 时序数据库荣登巅峰,被央视报道了!
  • 用EM算法估计GMM参数的实现
  • 已上岸|这才是老板喜欢的财务会计简历
  • STM32 Debug卡死在BKPT 0xAB
  • Python OpenCV 入门指南
  • 结束Linux特定端口上的进程,超级实用!
  • IDEA提示:java: 常量字符串过长
  • 金九银十来了,你的简历写好了么
  • js基础速成-字符串方法
  • JVM 内存参数
  • 模型 RULER情绪管理
  • 小琳Python课堂:Python性能测试利器:`timeit`和`memory_profiler`模块的使用与实践
  • MySQL——事务与存储过程(三)存储过程的使用(1)调用存储过程
  • SDIO驱动开发
  • 动手学深度学习(pytorch)学习记录23-图像卷积[学习记录]
  • 《黑神话:悟空》是用什么编程语言开发的
  • WordShield 一款轻量级且灵活的敏感词过滤库
  • 百日草花语探秘:天长地久的情感寄托与丰富内涵解析