【免费插件】逆天优化EL表格插件，每个功能都戳中痒点，已在商业项目大量使用！

紫菩提 · 2024-06-05更新

本帖最后由 phoben 于 2024-6-5 14:16 编辑

因为EL系列插件的美观性，我一直在项目中使用它，尤其是"EL-表格"插件，在项目中的出镜率是非常高的。

但是在使用过程中，我们也遇到很需求它无法满足，基于“自己动手，丰衣足食”的理念，我按照我的需求，对EL-表格进行了一些优化和改动。
如果你恰好也和超哥一样，喜欢EL表格，但有一些需求没办法满足，不妨试试看这款插件。

因为插件是基于官方EL插件(9.0.103.0版本)升级，无法上架应用市场，就在帖子里共享了
下载安装后会覆盖官方插件，下面是插件更新的介绍：

新增功能：

[新功能] EL表格：按钮可动态显示/隐藏，通过表达式来控制；
[新功能] EL表格：表格任意列支持隐藏；
[新功能] EL表格：支持运行时命令-获取表格数据源；
[新功能] EL表格：增加固定列在左侧/右侧功能；
[新功能] EL表格：增加自动合并列功能；
[新功能] EL表格：列管理逻辑变更，不再影响列数；
[新功能] EL标签头：增加吸附功能；
[新功能] EL表格：增加单元格点击事件；
[新功能] EL表格：增加列类型功能（图片、标签）；
[新功能] EL表格：表格按钮可以设置权限了（可见性、可用性）；
[新功能] EL输入框：可以添加前缀、后缀文字（好用！）
[新功能] EL表格：增加列权限配置（某些列对角色不可见）；

优化若干官方版本缺陷：

修复在切换数据源时，自定义列内容不更新的问题；
优化列默认对齐方式，现在列头与单元格对齐方式一致了；
优化列数据的格式类型，支持更多预设类型；
修复部分场景下“重载表格”不生效问题；
修复列排序，在JSON数据源模式下失效问题；

数据填充逻辑优化：
1. “配置表格列”内配置的字段，不再会影响表格显示列数；
2. “配置表格列”可只对想要配置的部分列做配置，没配置的列，不会因此不显示；
3. 可以通过新增的“隐藏列”功能实现可以获取数据，但实际不显示的效果；

我们来看看它的实际使用效果：

按钮的动态隐藏
可以根据行数据自行编写规则来决定按钮显不显示

效果预览
image.png867216491.png

配置方法
通过写一个简短的js语句，来决定按钮显示与否，理论上支持任何js语法，你甚至可以使用更复杂的对比逻辑，例如："||"、"&&"等对比符号，最终返回true则显示按钮。

image.png768150024.png

隐藏某一列
可以提前设置某一列的展示与否，包括JSON数据源或数据表数据源，即使隐藏该列，从命令里仍然还是可以读取它。

效果预览
数据源中是有ID字段的。
image.png858908080.png

配置方法
设计器中预览也会与配置同步
image.png401311034.png

默认对齐方式
官方插件的列头是中对齐，表格内部是左对齐，看起来会显得不太规整，使用插件后，默认都会使用中对齐，无需任何设置。

image.png536692809.png

使用后效果

全局增加更多数据类型
官方插件中只有日期的格式选择，这里提供了更多数据格式，例如：百分比、货币、2位数值、大写数字等，你仍然可以修改它

image.png535242614.png

增加“获取表格数据源”命令
现在你可以使用“操作单元格命令”选择EL表格后，可以使用“获取表格数据源”来获取一个JSON数组格式的数据源。
你可以用来判断当前你的表格内有多少条数据，或者通过插件、JS来摆弄表格数据了。

image.png219583434.png

使用方法
可获取表格内所有数据，JSON数组
image.png129187926.png

增加“合并列”功能
你可以通过列配置，让某些列自动合并，让现实效果更佳简洁直观；

image.png473760375.png

设置方法

新增“固定列”功能
你可以通过列配置，让某些列固定在左边或右边，非常实用
image.png251004332.png

设置方法

表格列管理逻辑的变更
官方插件的逻辑是，“配置表格列”里配置了几个字段，最终就显示几个字段。
但其实这样我认为是不合理的，因为如果我不想要这个字段显示在表格，我可以从数据源里不要选择就是，更何况更新后的插件可以自主隐藏列并保留数据。
所以我重构了这里的逻辑，“配置表格列”里你愿意定义几个列就定义几个，其他列还是会显示。
如果你不想某列显示，那么你就勾选隐藏列，这样你还是能取到行数据；
如果你想彻底排除某列，你直接数据源里就不提供，这样既不显示，也获取不到行数据；

官方版

image.png276896361.png

新版

最后再啰嗦一句，为什么要用这个逻辑。
假设你用JSON数据源来动态填充数据，常见的就是从N张表里取不同数据，根据条件来填充其中一张表的数据到EL表格，这时候如果你需要将“日期”字段改为日期类型，“金额”字段改为货币格式，“税率”字段改为百分比，假设几张表里都有这几个字段，放在官方的版本你需要怎么做呢？
没错！其实你实现不了，因为每个表的字段不一样，你无法在开发期间来提前设计好它们的格式，有了这个插件，我们只需要将日期、金额、税率三个字段设置一下类型格式，其他字段完全不用设置就行。

EL标签头自动吸附
可以使标签头自动吸附在顶部，当页面滚动到标签头位置，它会自动停留吸附在顶部。
在设计器里，可以看到，增加了几个选项，用于控制吸附效果
image.png737333373.png