全部产品
云市场

表单组件

更新时间:2019-03-15 19:48:24

1. 单行输入框 - textField

单行文字输入框组件

2. 多行输入框 - textareaField

多行文字输入框组件

3. 数字输入框 - numberField

只允许输入数字的单行输入框组件。

(1) 格式化

格式化输入的数字,最大长度为25位。有下列四种情况:

选项 说明
不启用格式化,保留原有格式
金额 金额格式,可以设置分隔符和小数位数
大陆手机号 手机号格式,可以设置分隔符
卡号 银行卡号格式,可以设置分隔符

(2) 单位名称

数字的单位,比如“元”、“本”、“页”等等。

(3) 对齐方式

数字对齐的方式,有左对齐(默认)右对齐两种形式。

4. 单选 - radioField

单选选择组件。

(1) 排列风格 (仅PC端生效)

① 横向排列(默认):选项横向排列成一行;② 纵向排列:选项纵向排列成一列;

(2) 选项

① 自定义:自定义添加选项;
关联其它表单数据:以关联其他表单的数据作为选项;
数据联动:以数据联动的数据作为选项;
④ 网关数据:以来自网关的数据作为选项;

(3) 关联选项设置

当目标选项被选择后,显示该选项所关联的组件。一个选项可以对应一个或多个组件的显示隐藏。

5. 下拉单选 - selectField

下拉方式的单项选择组件,带搜索和清除按钮。当数据量大于20条时,将自动开启搜索模式。

(1) 选项

① 自定义:自定义添加选项;
关联其它表单数据:以关联其他表单的数据作为选项;
数据联动:以数据联动的数据作为选项;
④ 网关数据:以来自网关的数据作为选项;

(2) 关联选项设置

当目标选项被选择后,显示该选项所关联的组件。一个选项可以对应一个或多个组件的显示隐藏。

(3) 快速添加

启用快速添加后,将允许用户快速新增关联表单的数据作为新的选项。

1

(4) 允许清空 (仅PC端生效)

是否显示清空所选项的按钮,默认显示。

6. 多选 - checkboxField

多选选择组件。

(1) 排列风格 (仅PC端生效)

① 横向排列(默认):选项横向排列成一行;② 纵向排列:选项纵向排列成一列;

(2) 选项

① 自定义:自定义添加选项;
关联其它表单数据:以关联其他表单的数据作为选项;
数据联动:以数据联动的数据作为选项;
④ 网关数据:以来自网关的数据作为选项;

7. 下拉多选 - multiSelectField

下拉式多项选择组件,默认列表模式,带搜索。

(1) 多选方式

① 复选:支持全选功能

2

② 列表:支持筛选功能

3

(2) 选项

① 自定义:自定义添加选项;
关联其它表单数据:以关联其他表单的数据作为选项;
数据联动:以数据联动的数据作为选项;
④ 网关数据:以来自网关的数据作为选项;

8. 日期 - dateField

日期选择组件。

(1) 格式

① 年:以 yyyy 格式显示日期;
② 年月:以 yyyy-MM 格式显示日期;
③ 年月日(默认):以 yyyy-MM-dd 格式显示日期;
④ 年月日时分:以 yyyy-MM-dd HH:mm 格式显示日期;

(2) 不可选时间限制

① 无:无限制,整个时间区间都可以选择;
② 今天之前(不含今天):以昨天开始往前的区间为不可选区间;
③ 今天之后(不含今天):以明天开始往后的区间为不可选区间;
④ 指定区间:以开始时间(包含)和结束时间(包含)的区间为不可选区间;

9. 日期区间 - cascadeDate

日期区间选择组件,格式为“开始时间 — 结束时间”。

(1) 日期格式

① 年月日(默认):以 yyyy-MM-dd 格式显示日期;
② 年月:以 yyyy-MM 格式显示日期;
③ 年:以 yyyy 格式显示日期;

(2) 默认值

设置“开始日期”和“结束日期”的默认值。“开始日期”不能晚于“结束日期”。

(3) 可选日期 (仅PC端生效)

可选时间范围为“开始日期”和“结束日期”之间的时间段。“开始日期”不能晚于“结束日期”。

10. 上传图片 - imageField

上传图片组件,为用户提供上传图片的功能。
注:默认最大只支持20M的图片。如果有大于20M的图片上传需求,请将图片上传到其它存储空间,然后将链接贴在页面上面供查看下载。

(1) 是否多选(仅支持PC端)

在选择图片时是否可以同时选择多个(默认开启)。

(2) 最多上传(仅支持PC端)

限制上传图片的数量。

(3) 横向排列(仅支持PC端)

是否开启横向排列,图片横向排列且隐藏文件名称。

开启状态:

4

不开启状态:

4

其中每张上传后的图片上面都有三个按钮,“查看大图”、“下载”和“删除”按钮。

5

11. 上传附件 - attachmentField

为用户提供附件上传功能。
注:默认最大只支持20M的附件。如果有大于20M的附件上传需求,请将附件上传到其它存储空间,然后将链接贴在页面上面供查看下载。

(1) 是否多选(仅支持PC端)

在选择附件时是否可以同时选择多个(默认开启)。

(2) 格式限制

限制上传附件的格式。
注:移动端受限于该功能,不支持配置该项,非钉钉容器内只支持图片上传。

(3) 最多上传

限制上传附件的数量。

7

12. 人员搜索框 - employeeField

为用户提供人员选择的功能。

(1) 多选

是否支持一次选择多个人员(默认开启)。

8

(2) 默认值

可以选择指定人员作为默认值。

13. 地区选择 - citySelectField

为用户提供地区选择功能。

(1) 类型

提供三种选择类型:
① 省/市/区:省市区三级级联选择。
② 省/市:省市二级级联选择。
③ 省:省份一级选择。

(2) 编辑默认值

  1. ['110000', '110100', '110101']

14. 级联选择 - cascadeSelectField

为用户提供级联选择的功能。

(1) 每列宽度

定义每一列的宽度值,单位仅支持px。当文字显示不全,文字溢出时,可设置适当的宽度来显示。

(2) 编辑默认值

格式如下:

  1. [
  2. "part",
  3. "part_b"
  4. ]

(3) 列标题

列标题的个数决定了当前级联的层数。格式如下:

  1. [
  2. {
  3. "type": "i18n",
  4. "en_US": "column one",
  5. "zh_CN": "第一列one"
  6. },
  7. "第二列"
  8. ]

(4) 数据源

数据外层封装,DATA类型如下:

  1. {
  2. "type": "DATA",
  3. "process": "function process(content){\n return content; \n}",
  4. "willFetch": "function willFetch(params){\n return params; \n}",
  5. "data": [
  6. {
  7. "value": "part",
  8. "label": {
  9. "type": "i18n",
  10. "en_US": "dep",
  11. "zh_CN": "部门"
  12. },
  13. "children": [
  14. {
  15. "value": "part_a",
  16. "label": "A部门"
  17. },
  18. {
  19. "value": "part_b",
  20. "label": "B部门"
  21. }
  22. ]
  23. },
  24. {
  25. "value": "product",
  26. "label": "产品",
  27. "children": [
  28. {
  29. "value": "product_a",
  30. "label": "a产品"
  31. },
  32. {
  33. "value": "product_b",
  34. "label": "b产品"
  35. }
  36. ]
  37. }
  38. ]
  39. }

① URL类型:使用远程数据作为数据源
方式:GET、POST、JSONP;
地址:URL地址
参数:请求携带的参数
请求处理函数:在请求发送前处理请求携带的参数
数据处理函数:在请求响应后处理请求响应的数据

  1. {
  2. "dataSource": {
  3. "type": "URL",
  4. "process": "function process(content){\n return content; \n}",
  5. "willFetch": "function willFetch(params){\n return params; \n}",
  6. "data": [
  7. {
  8. "value": "part",
  9. "label": {
  10. "type": "i18n",
  11. "en_US": "dep",
  12. "zh_CN": "部门"
  13. },
  14. "children": [
  15. {
  16. "value": "part_a",
  17. "label": "A部门"
  18. },
  19. {
  20. "value": "part_b",
  21. "label": "B部门"
  22. }
  23. ]
  24. },
  25. {
  26. "value": "product",
  27. "label": "产品",
  28. "children": [
  29. {
  30. "value": "product_a",
  31. "label": "a产品"
  32. },
  33. {
  34. "value": "product_b",
  35. "label": "b产品"
  36. }
  37. ]
  38. }
  39. ],
  40. "url": "http://www.example.com",
  41. "params": [
  42. {
  43. "name": "a",
  44. "value": "1",
  45. "__sid__": "serial_j9xti6wn"
  46. }
  47. ]
  48. }
  49. }

② DATA类型:使用用户自定义的数据作为数据源,数据格式如下

  1. [{
  2. "value": "part",
  3. "label": "部门",
  4. "children": [
  5. {
  6. "value": "part_a",
  7. "label": "A部门"
  8. },
  9. {
  10. "value": "part_b",
  11. "label": "B部门"
  12. }
  13. ]
  14. },
  15. {
  16. "value": "product",
  17. "label": "产品",
  18. "children": [
  19. {
  20. "value": "product_a",
  21. "label": "a产品"
  22. },
  23. {
  24. "value": "product_b",
  25. "label": "b产品"
  26. }
  27. ]
  28. }]

15. 部门选择 - departmentField

为用户提供部门选择的功能。

(1) 搜索数据源(仅PC端支持)

① 方式:GET或JSONP;② 地址:数据源地址;③ 请求处理函数:在请求发送前处理请求携带的参数;④ 数据处理函数:在请求响应后处理请求响应的数据。

(2) 移动端专有设置项(仅移动端支持)

① 为空文案:设置搜索内容存在时的文案;

16. 明细组件 - tableField

一种高级的容器组件,可以在其内部添加多个组件,并且重复多次。

(1) 排列方式(表格方式只在PC模式下有效)

① 平铺方式:
展现方式(只在平铺方式下有效):横向和纵向

9

② 表格方式:
显示序号:只在PC表格方式下有效,是否显示前面的序号。
主题:只在PC表格方式下有效,分为斑马纹、分割线和边框线。
显示表头:只在PC表格方式下有效,是否隐藏显示表头。

10

(2) 按钮名称

添加一组明细组件按钮的名称。

(3) 删除按钮

删除一组明细组件按钮的名称。

17. 评分 - rateField

为用户提供评分功能的组件。

(1) 尺寸

评分五角星⭐️的大小,有大尺寸和小尺寸两种

(2) 总分数

一颗五角星⭐️代表一分,总的五角星数即为总分数

(3) 默认值

默认选中五角星⭐️的颗数,即默认分数值

(4) 显示描述

是否显示提示开关

(5) 提示方式(仅PC端支持)

下方展示:默认显示在评分的下方
悬浮展示:当鼠标移动到评分上面时,Tooltip形式显示

(6) 描述信息

每一颗星星的说明信息

18. 国家选择 - countrySelectField

为用户提供国家选择的功能。

(1) 多选模式(仅PC端支持)

是否支持多选开关

(2) 移动端专有设置项

① 搜索文案:搜索的文案;② 为空文案:搜索内容不存在时的文案;③ 取消文案:取消搜索的文案。