选择视图

【选择视图】属于“列表类”组件,所以在很多特性上与【列表】相同。

应用场景

当需要进行 「选项」 选择时,可使用选择视图组件。选择视图提供选中与未选中、单选/多选等功能。

  • 答题选项:选中时为蓝底蓝字,未选中时白底黑字
  • 商品分类选择
  • 业务类型选择

选择视图设计

选择视图可以理解为具备「选择」功能的列表,你不仅可以设置选择视图本身的样式,还可以点击选择编辑【选中区域】或【未选中区域】的子视图来编辑选项选中和未选中的样式与内容

多行显示内容:选择视图组件默认是横向显示选项内容的,当我们想要纵向显示选择视图时,可以打开组件本身设计中的【多行显示内容】模式,并将选择视图的宽度设置成和子视图一样的宽度,同时将子视图的宽度设置为100%

多选: 默认关闭,开启后可以选择多个选项 可取消选中: 默认关闭,选择的选项,再次点击后可以取消选中 不选即全选: 默认开启,目前暂无任何使用意义,可忽略 刷新时保留选中选项: 默认关闭,打开后如果刷新了该组件,原先选中的内容依旧被保留显示

子视图设计

选择视图内部拥有【选中区域】和【未选中区域】两个子视图,分别可以设置其子视图的显示内容、尺寸以及样式

  • 选中区域:选项未选中时选项呈现的内容以及样式。
  • 未选中区域:选项被选中时选项呈现的内容以及样式。

选择视图内容

选择视图的内容就是有哪些需要实际业务中需要选择的选项

选择视图的数据源可以是本地数据,也可以是远程数据,建议先了解《数据的读取和显示》

本地数据

添加选项以及默认值:直接在【选择视图】的内容中的本地数据里添加选项内容(至少两个),如果要设置默认值,那么默认值要跟选项内容一致,例如设置的选项中有“篮球”、“足球”、“羽毛球”三个选项,那么默认值只能是三个选项中的一个,当设置了默认值之后,该选项就会默认被选中

绑定选项内容: 双击【选择视图】进入到子容器中,为【选中区域】中的组件绑定要显示的数据内容,点击输入框旁的【+】号,找到「组件内数据 - 选择视图 - item 」进行选项内容的绑定。

💡 Tips: 选项的排列顺序:当选择视图为横向展示选项时,选项的从左往右排列顺序是根据【选择视图】内容的顺序从上往下来确定的

远程数据

前提:在数据模型中创建了对应的选项数据表 添加选项: 将【选择视图】的数据中数据来源调整为「远程数据」,选择创建好的数据表

列表字段&默认选项: 当需要设置默认选中项时,需要先选择默认选中的字段,然后根据字段类型以及内容,通过输入/数据选择来指定默认值的内容。

默认值不要绑定组件内数据选择视图!!!

  • 例如:在 省份 表中有 ID、name 两个字段
  • 设置列表字段为 ID 时,默认值要设置为 省份 表中某条数据的 ID
  • 设置列表字段为 name 时,默认值要设置为 省份 表中某条数据具体的 name 的值

绑定选项内容: 进入子容器之后,在需要显示选项的组件的内容中绑定选项内容,点击内容中的【+】号,找到「组件内数据 - 选择视图 - item - 显示的字段」

Tips: 选择视图添加了远程数据后设置“列表字段”的作用主要是在设置默认值时,该默认值的内容以及类型要与选择的字段内容、类型相对应。

输出配置

选择视图选择的结果可以绑定到组件上显示或通过修改表数据行为插入、更新数据表。为了准确的找到其数据,建议将选择视图组件重命名

单选时

单选本地数据

如果选择视图的本地数据中有“足球”、“篮球”、“羽毛球”三个选项,那么选择某个选项之后,当通过【输入类组件】引用该选择视图的数据时,引用的就是选择的具体的选项值

单选远程数据

远程数据就是数据库某张表中的数据,这些数据往往有多个字段,所以为选择视图绑定了远程数据后,在绑定选项时需要告诉组件要绑定这条远程数据的哪个字段作为选项,在使用选择结果时,需要明确要使用这条远程数据中哪个字段来使用

举个例子 场景:选择要上传的商品的分类 商品分类表中的字段:ID、分类名称、分类排序、状态 商品表中的字段:商品名称、分类名称、分类名称ID、商品价格等

  • 在利用修改表数据行为向商品表中添加一条商品数据,填写商品分类名称时,我们绑定的是「输入框 - 选择视图 - 分类名称字段」
  • 如果你是通过商品分类表与商品表之间建立一对多关系,需要在商品表中记录分类ID时,那么再添加数据时给对应的字段绑定的数据是「输入框 -选择视图 - ID 」

多选时

多选意味着选择的结果不是某一个值,而是一组数据,我们把这一组数据称之为 【数组】

多选本地数据

如果选择视图的本地数据中有“足球”、“篮球”、“羽毛球”三个选项 多选的前两个选项的结果是 [ "足球",“篮球”] 这样的一个数组 利用修改表数据行为向数据表中添加选择的多条数据时,需要打开修改表数据行为的【批量修改】模式,设置数据源为「输入框 - 选择视图」,如下图所示,添加活动内容时,name 这个字段需要填充的是多选的某个结果,那么点击 name 字段旁的设置按钮,点击「切换」即可。

多选远程数据

如果选择视图的远程数据来源于数据库中的如下图所示的商品分类表,当我们选中多个商品分类时,选中的是多条数据

利用修改表数据行为向数据表中添加选择的多条数据时,需要打开修改表数据行为的【批量修改】模式,设置数据源为「输入框 - 选择视图」,由于我们选中的多条数据,每条数据中有多个字段,此时需要告诉配置,要添加的是某条选中的数据中的哪一个字段的内容 如下图所示,点击数据源,「数组字段映射」中选择需要的某一个字段,然后点击右上角「x」号关闭选择,接着例如添加具体活动内容时,name 这个字段需要填充的是多选的某个结果,那么点击 name 字段旁的设置按钮,点击「切换」即可。

选择视图交互

项点击时行为: 选择某个选项后,可以根据业务情况配置对应的其它交互行为

使用示例

单选问卷 Tab式导航栏
Copyright © FunctorZ 2024 all right reserved修订时间: 2024-10-12 10:57:53

results matching ""

    No results matching ""