1 功能简介

可以配置列表表格操作列显示相关功能。

2 配置说明

(1)显示位置

支持配置操作在表格中的显示位置,支持配置“不显示”、“左边”。“右边”。

(2)列标题

在【其他设置】中支持对操作列头标题进行自定义配置,默认为“操作”。

例如修改为“商品维护”,效果如下:

(3)列宽设置

设备表单列表字段列数量和宽度等可以由表单设计者自行按需定义,且操作栏的行操作按钮支持配置多种显示方式,同时通过操作权限配置还允许各行的操作按钮个数并不一定完全一致,所以对于操作栏来说为了适应以上多种情况,想要是操作栏能够得到一个比较好的呈现效果就需要操作栏的列宽能够支持更加灵活的配置。

① 按内容自适应

适用场景:适用于希望操作列能够在保证按钮展示完全的情况下尽可能少占用列宽,将列宽更多留给字段做展示的场景。适用于操作栏中各分页及各行的操作相对固定可控。

  • 在设计器中对表单模板进行设置时,操作栏列宽设置默认选中此项
  • 选择按内容自适应时,列表页面在加载时去计算第一页所有数据中行操作内容的最大宽度,操作栏按这个最大宽度撑开操作栏显示(行操作最大宽度有可能是按钮个数较多或操作名称较长)
  • 支持手动拖动调整列宽
  • 注意:该模式下只会计算第一页数据行操作最大宽度,翻页时不会重新计算行并调整列宽。

如下图所示,当存在5个操作时会按5个操作的内容宽度撑开操作栏列宽显示。

如下图所示,由5个按钮减少为3个,页面加载时会根据操作栏内容自适应调整列宽为合适的宽度显示。

如下图所示,操作栏行操作内容不同时,按内容宽度最大的行操作撑开操作栏显示。

② 按表格自适应

适用场景:适用于对操作栏列宽没有严苛的宽度要求,在列表页面手动增减列表显示字段时,希望操作栏能够在一定范围内与其他自适应字段列宽一起根据屏幕宽度自适应显示。适用于操作栏中各分页及各行的操作整体可控,想要保证操作按钮的展示完整,需要通过调整按钮展示方式和最小列宽加以限制。

  • 选择按表格自适应时,操作栏自适应规则:表格宽度减去固定宽度(复选框列、序号列、固定列宽字段)后,操作栏与其他自适应列宽字段列平分剩余宽度显示。
  • 最小列宽:必填,默认值100像素,允许调节范围30-500像素,可以保证自适应计算列宽小于最小列宽时按最小列宽展示,防止字段增加至较多时将操作栏挤压得无法完整展示行操作按钮。
  • 最大列宽:必填,默认值500像素,不小于最小列宽,可以保证自适应计算列宽大于最大列宽时,按最大列宽展示,字段减少时不至于展示过宽造成不美观。
  • 在最小列宽至最大列宽范围内支持手动拖动调整列宽。

例如配置了操作栏列宽按表格自适应,最小宽度250,最大宽度500。字段列较多时,操作栏自适应列宽小于最小宽度时,按最小宽度显示。

同样的配置,当字段列减少时操作栏列宽根据自适应规则自动调节,当自适应列宽大于最大列宽时,按最大列宽显示。

③ 固定列宽

适用场景:设计者对操作栏内容展示和列表其他字段展示完全有把握,操作栏根据需要设置固定列宽显示就够用,不用去计算页面性能会更好。

  • 选择固定列宽展示时,顾名思义列表页面加载时按配置的固定列宽展示
  • 列宽:必填,默认值100像素,允许调节范围30-500像素
  • 支持手动拖动调整列宽

(4)显示样式

列表行操作根据数量和操作名称等因素,要达到较好的显示效果就需要对操作列行操作的显示样式进行一定的配置。

① 横向平铺显示

适用场景:默认的按钮展示方式,横向一字排开,当按钮数量或按钮名称较长时会占用有限的表格宽度,适用于行操作按钮较少的情况。

执行效果:

版本V7.3.0扩充【无权限样式】配置项。默认行操作无权限时“不显示操作”,支持配置为“禁用操作”,适用于行操作按钮较多时避免前端界面因权限控制呈现比较参差。

禁用无权限操作执行效果:

② 纵向平铺显示

适用场景:将行操作纵向排开,适用于行操作较多按钮名较为均衡,或是各行由于操作权限问题操作个数不同,使用这种显示方式会比较节省操作列宽且显得较为整齐。

执行效果:

③ 下拉菜单显示

适用场景:将各行操作一律收起来显示,需要使用时下拉显示。适用于操作按钮较多,但操作频率较低的场景。

  • 可以对下拉按钮显示名称进行自定义。

执行效果:

④ 混合显示

适用场景:兼顾平铺展示与下拉菜单显示,适用于行操作中有部分是常用操作,部分高级操作使用频率低的情况。

  • 直接显示的操作有两种配置方式:
    1. 按操作指定直接显示哪些操作收起剩余操作;
    2. 按数量显示排序靠前的几个操作(一般应用于由于操作权限控制,各行操作不尽相同)。

混合显示执行效果:

② 图标方式显示

适用场景:采用图标方式展示,适用于操作名称字数差异较大,出于美观整齐的因素考虑可以将操作按钮设置成图标来显示。

  • 在此处设置为“图标方式显示”,相应的行操作个性化配置界面将开放图标选择和颜色的配置项,各操作实际展示的图标需要去各个操作上单独配置。

此时我们去预览一下可以发现,列表操作列操作按钮的布局方式已经变为图标方式显示了,如下图所示。系统操作“修改”和“删除”显示为特定的修改和删除样式,其余配置的自定义操作均显示为一个默认图标样式,操作按钮的图标和颜色可以去操作按钮个性化设置中进行自定义设置,稍后我们会展开介绍。

图标方式展示还有一个特点就是不再显示操作按钮的名称,那么除了通过配置的图标不同来区分以外,可以看到下图中鼠标悬停还可以以小标签的样式显示对应的操作名称。

接下来以自定义操作为例来介绍操作按钮图标方式展示时如何更换图标和颜色。如下图所示,在自定义操作配置界面“操作个性化设置”中可以看到图标支持配置“图标”和“图标颜色”了(行操作仅在以图标方式显示时允许配置,其余显示方式不显示这两个配置项)。

显示效果:

作者:Eric  创建时间:2024-06-13 17:39
最后编辑:Eric  更新时间:2025-04-24 13:55