# SuperPage组件-单选/多选面板

SuperPage提供了选择面板,包括单选面板和多选面板,可以过滤或提交数据。多选面板与单选面板的功能一致,只需要勾选允许多选即可。本文以单选面板为例,介绍选择面板的用法。

单选面板示例

示例地址:单选面板 (opens new window)

# 使用单选面板过滤数据

使用单选面板组件过滤数据有2种方式:

  • 自动过滤数据:当单选面板绑定了字段,那么可以启用自动过滤,此时系统会自动以单选面板选择的值为过滤条件,如【企业类型】单选面板,选择对应企业类型后即可自动过滤查询出来的数据。勾选自动过滤属性并设置条件字段属性即可,具体可参考使用下拉框过滤数据
  • 过滤数据模型的数据:当过滤条件比较复杂,或者单选面板的值没有绑定字段,此时需要通过表达式编写过滤条件进行过滤,可参考文档勾选框-使用勾选框过滤数据

# 使用单选面板提交数据

单选面板提交数据的方式与其它输入组件一致,需要勾选提交数据并设置绑定字段,具体可参考文本输入组件。具体可参考文本输入组件

# 选项数据

# 来自模型数据

当单选面板的选项数据在已有模型表中存在时,在可选项的下拉列表中选择对应的模型表即可,并且可以设置选项的显示内容及节点属性等,与下拉框组件属性设置一样,可参考文档下拉框

模型数据

# 枚举值

如果无法从数据模型中获得可选值,那么也可以自行编辑枚举值。在可选项下选择枚举值,然后点击编辑枚举值

枚举值

# 多选面板

多选面板与单选面板的使用方法一致,只是允许同时选择多个选项,及选择框的样式不一致。使用多选面板有2种方式:

多选面板

  • 组件区>输入分组下拖入多选面板到页面中
  • 将单选面板设置允许多选:在选择面板>可选项中勾选允许多选即可

TIP

当多选时提交的多个值之间是以逗号分隔存储在字段中,若展示数据时需要与关联表的数据关联起来,则需要给字段设置字段角色多值

# 属性介绍

# 横向排列

单选面板的排列方式默认为横向,当为横向时可设置绕排和按列对齐:

横向排列

  • 绕排:设置为自动绕排后,选项一行显示不下时,会自动换行排列。也可以选择不绕排显示选项
    • 按列对齐:设置自动绕排后,可以设置选项按列自动对齐排列
    • 固定列数:设置了按列对齐后,可以设置一行显示几列,输入大于0的整数,2表示显示2列
自动绕排 按列对齐

自动绕排

换列对齐

# 纵向排列

属性栏>样式>面板下可设置单选面板的排列方式为纵向排列:

纵向排列

# 启用展开收起

当选项较多时,可以收起部分选项,勾选该属性即可。可以设置默认是收起的效果,勾选默认收起属性即可,可设置收起时默认的显示行数

  • 显示行数:收起时,显示的选项行数,默认为1,即只显示一行,输入大于0的整数即可

展开收起

# 选项面板样式设置

属性栏>样式>下可设置面板和选项的样式:

样式设置

  • 面板:包括填充、边框、内边距等样式设置
  • 选项:可以设置选项文字的字体、填充、边框、圆角、边距等,也可以设置是否显示勾选图标
    • 显示勾选图标:当勾选后在选项前会有一个可勾选的框,选择选项时可点击勾选框或者选项标题,若未勾选,则只显示选项标题,点击选项标题即代表选中。默认勾选该选项

# 单选面板、下拉框、选择列表区别介绍

单选面板、下拉框选择列表表输入组件的作用一致,区别在于数据的展现形式和应用场景不一致:

组件 展示方式 应用场景
单选面板 平铺 适用于选项较少的数据,如价格档次等
下拉框 下拉列表 适用于展示有层次结构的数据,如销售单位、行政区划等
选择列表 列表 与下拉框类似,可展示有层次结构的数据
是否有帮助?
0条评论
评论