Form 表单

基础用法

默认的编辑状态的表单。可以通过配置 props['label-width] 来设置整个 form 表单的 label 宽度。

Form 表单 - 图1

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "新文本",
  7.         "type": "text"
  8.       },
  9.       "date": {
  10.         "type": "date",
  11.         "label": "日期"
  12.       },
  13.       "password": {
  14.         "type": "password",
  15.         "label": "密码"
  16.       }
  17.     }
  18.   },
  19.   "ctx": "edit",
  20.   "props": {
  21.     "label-width": "200px"
  22.   }
  23. }

显示配置

带操作按钮的表单

在定义field时也可以通过rules配置该字段的校验规则，通过operations来配置带按钮的表单（包括提交按钮和取消按钮）

Form 表单 - 图2

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "type": "text",
  7.         "label": "文本",
  8.         "rules": [{
  9.           "required": true,
  10.           "message": "请输入文本",
  11.           "trigger": "blur"
  12.         }, {
  13.           "min": 3,
  14.           "max": 5,
  15.           "message": "长度在 3 到 5 个字符",
  16.           "trigger": "blur"
  17.         }],
  18.         "props": {
  19.           "placeholder": "请输入字符，长度在 3 到 5 个",
  20.           "suffix-icon": "el-icon-service"
  21.         }
  22.       },
  23.       "date": {
  24.         "type": "date",
  25.         "label": "日期"
  26.       },
  27.       "password": {
  28.         "type": "password",
  29.         "label": "密码"
  30.       }
  31.     }
  32.   },
  33.   "ctx": "edit",
  34.   "operations": {
  35.     "submit": {
  36.       "type": "button",
  37.       "label": "提交",
  38.       "props": {
  39.         "type": "primary"
  40.       }
  41.     },
  42.     "cancel": {
  43.       "type": "button",
  44.       "label": "取消"
  45.     }
  46.   },
  47.   "events": {
  48.     "submit": "@validate @confirm:确认提交吗? @update"
  49.   },
  50.   "actions": {
  51.     "cancel": function() {
  52.       this.$message.success("取消成功")
  53.     },
  54.     "update": function() {
  55.       this.$message.success("提交成功")
  56.     }
  57.   }
  58. }

显示配置

带默认值的表单

通过data: {fieldname: 'xxx'}来配置某个field的默认值，优先级会高于在resource里定义field时配置的default

Form 表单 - 图3

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "新文本1",
  7.         "type": "text",
  8.         "default": "我是resource里定义的默认值"
  9.       },
  10.       "text2": {
  11.         "label": "新文本2",
  12.         "type": "text",
  13.         "dafault": "我是resource里定义的默认值"
  14.       },
  15.       "date": {
  16.         "type": "date",
  17.         "label": "日期"
  18.       },
  19.       "password": {
  20.         "type": "password",
  21.         "label": "密码"
  22.       }
  23.     }
  24.   },
  25.   "ctx": "edit",
  26.   "data": {
  27.     "text2": "我是data里定义的默认值",
  28.     "date": 1539792000000
  29.   }
  30. }

显示配置

把表单的某几项显示在同一行

通过layout来配置某几个field显示在同一行

Form 表单 - 图4

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "新文本1",
  7.         "type": "text",
  8.         "default": "我是resource里定义的默认值"
  9.       },
  10.       "text2": {
  11.         "label": "新文本2",
  12.         "type": "text",
  13.         "dafault": "我是resource里定义的默认值"
  14.       },
  15.       "date": {
  16.         "type": "date",
  17.         "label": "日期"
  18.       },
  19.       "password": {
  20.         "type": "password",
  21.         "label": "密码"
  22.       }
  23.     }
  24.   },
  25.   "ctx": "edit",
  26.   "data": {
  27.     "text2": "我是data里定义的默认值",
  28.     "date": 1539792000000
  29.   },
  30.   "layout": {
  31.     "text": ["text", "text2"]
  32.   }
  33. }

显示配置

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。这种是整个表单显示在同一行，直到一行放不下才会换行。

Form 表单 - 图5

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "新文本1",
  7.         "type": "text",
  8.         "default": "我是resource里定义的默认值"
  9.       },
  10.       "date": {
  11.         "type": "date",
  12.         "label": "日期"
  13.       },
  14.       "password": {
  15.         "type": "password",
  16.         "label": "密码"
  17.       }
  18.     }
  19.   },
  20.   "ctx": "edit",
  21.   "props": {
  22.     "inline": true
  23.   }
  24. }

显示配置

展示状态表单

通过ctx: 'view'来配置为纯展示的表单，通常用于只读展示。

Form 表单 - 图6

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "文本",
  7.         "type": "text"
  8.       },
  9.       "date": {
  10.         "type": "switch",
  11.         "label": "开关"
  12.       },
  13.       "textarea": {
  14.         "type": "textarea",
  15.         "label": "内容"
  16.       },
  17.       "color": {
  18.         "type": "color",
  19.         "label": "颜色"
  20.       },
  21.       "rate": {
  22.         "type": "rate",
  23.         "label": "评分"
  24.       },
  25.       "radio": {
  26.         "type": "radio",
  27.         "label": "单选",
  28.         "props": {
  29.           "options": {
  30.             "a": "黄金糕",
  31.             "b": "双皮奶",
  32.             "c": "蚵仔煎",
  33.             "d": "龙须面",
  34.             "e": "北京烤鸭"
  35.           }
  36.         }
  37.       },
  38.       "checkbox": {
  39.         "type": "checkbox",
  40.         "label": "多选",
  41.         "props": {
  42.           "options": {
  43.             "a": "黄金糕",
  44.             "b": "双皮奶",
  45.             "c": "蚵仔煎",
  46.             "d": "龙须面",
  47.             "e": "北京烤鸭"
  48.           }
  49.         }
  50.       }
  51.     }
  52.   },
  53.   "ctx": "view",
  54.   "data": {
  55.     "text": "双11活动",
  56.     "switch": 1,
  57.     "textarea": "双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动",
  58.     "color": "#f00",
  59.     "rate": 3.7,
  60.     "radio": "d",
  61.     "checkbox": "b,c"
  62.   }
  63. }

显示配置

分组的表单

如果表单太多，还可以插入block来进行分组。配置子block的slot为field:${fieldName}，可以在某行后插入任意block，如想在 date 这个field后面插入title block

Form 表单 - 图7

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "文本",
  7.         "type": "text"
  8.       },
  9.       "date": {
  10.         "type": "switch",
  11.         "label": "开关"
  12.       },
  13.       "textarea": {
  14.         "type": "textarea",
  15.         "label": "内容"
  16.       },
  17.       "color": {
  18.         "type": "color",
  19.         "label": "颜色"
  20.       },
  21.       "rate": {
  22.         "type": "rate",
  23.         "label": "评分"
  24.       }
  25.     }
  26.   },
  27.   "ctx": "edit",
  28.   "events": {
  29.     "init": "@console",
  30.     "submit": "@validate @confirm:确认提交吗? @update"
  31.   },
  32.   "actions": {
  33.     "fieldChange": function(e) {
  34.       var t = e.name,
  35.         a = e.value;
  36.       "testSwitch" === t && (this.block.fields.testPassword.props.disabled = !a)
  37.     }
  38.   },
  39.   "operations": {
  40.     "submit": {
  41.       "type": "button",
  42.       "label": "提交",
  43.       "props": {
  44.         "type": "primary"
  45.       }
  46.     },
  47.     "cancel": {
  48.       "type": "button",
  49.       "label": "取消"
  50.     }
  51.   },
  52.   "blocks": {
  53.     "formSlotTitle": {
  54.       "type": "title",
  55.       "options": {
  56.         "title": "其它表单"
  57.       },
  58.       "style": {
  59.         "marginLeft": "50px"
  60.       },
  61.       "slot": "field:textarea"
  62.     }
  63.   }
  64. }

显示配置

顶部slot block

配置子block的slot为top，可以插入在顶部

Form 表单 - 图8

  1. {
  2.   "type": "form",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "新文本",
  7.         "type": "text"
  8.       },
  9.       "date": {
  10.         "type": "date",
  11.         "label": "日期"
  12.       },
  13.       "password": {
  14.         "type": "password",
  15.         "label": "密码"
  16.       }
  17.     }
  18.   },
  19.   "ctx": "edit",
  20.   "blocks": {
  21.     "title1": {
  22.       "type": "title",
  23.       "options": {
  24.         "title": "主标题"
  25.       },
  26.       "slot": "top"
  27.     }
  28.   }
  29. }

显示配置

在线实验室

Form 表单 - 图9

Form 表单 - 图10

参数列表

参数说明可选值 | 类型必填
typeblock类型string是
datadata可以指定当前block的初始数据，结构和fields保持一致null | object否
config全局配置，和通过ams.config配置效果一致null | object否
style可以设置区块的外层样式null | object否
events可以配置对应事件的处理actionsnull | object否
actions可以配置具体的action处理函数null | object否
operations可以配置operation操作null | object否
blocks可以配置多个子blocknull | object否
render默认为false，配置为true则自动在body内渲染，如传入string则渲染在指定的querySelector上boolean | string否
props会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性null | object否
optionsblock特有配置null | object否
ctx编辑态为edit，展示态为view"edit" | "view"否
resource资源配置，可以通过string使用同名resource，或者直接通过object指定string | object否
fields会合并覆盖resource内的fieldsnull | object否
layout可以重定义field的布局，如合并多个field在同一行，如{ testText: ['testTest', 'testDate']}null | object否