AMS文档

# Form 表单

# 基础用法

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

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本",
        "type": "text"
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "props": {
    "label-width": "200px"
  }
}
显示配置 在线运行

# 带操作按钮的表单

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

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "type": "text",
        "label": "文本",
        "rules": [{
          "required": true,
          "message": "请输入文本",
          "trigger": "blur"
        }, {
          "min": 3,
          "max": 5,
          "message": "长度在 3 到 5 个字符",
          "trigger": "blur"
        }],
        "props": {
          "placeholder": "请输入字符，长度在 3 到 5 个",
          "suffix-icon": "el-icon-service"
        }
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "operations": {
    "submit": {
      "type": "button",
      "label": "提交",
      "props": {
        "type": "primary"
      }
    },
    "cancel": {
      "type": "button",
      "label": "取消"
    }
  },
  "events": {
    "submit": "@validate @confirm:确认提交吗? @update"
  },
  "actions": {
    "cancel": function() {
      this.$message.success("取消成功")
    },
    "update": function() {
      this.$message.success("提交成功")
    }
  }
}
显示配置 在线运行

# 带默认值的表单

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

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本1",
        "type": "text",
        "default": "我是resource里定义的默认值"
      },
      "text2": {
        "label": "新文本2",
        "type": "text",
        "dafault": "我是resource里定义的默认值"
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "data": {
    "text2": "我是data里定义的默认值",
    "date": 1539792000000
  }
}
显示配置 在线运行

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

通过 field.props.inline: true 来配置该field显示占位，如果两个相邻的field都配置 inline: true，那么这两个field就会在同一行显示。另外，还可以通过 field.props.formItemWidth: '200px' 配置来控制行内field的显示宽度。

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本1",
        "type": "text",
        "default": "我是resource里定义的默认值",
        "props": {
          "inline": true
        }
      },
      "text2": {
        "label": "新文本2",
        "type": "text",
        "dafault": "我是resource里定义的默认值",
        "props": {
          "inline": true
        }
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "select": {
        "type": "select",
        "label": "选项",
        "props": {
          "inline": true,
          "options": {
            "vip": "唯品会",
            "jd": "京东"
          }
        }
      },
      "password": {
        "type": "password",
        "label": "密码",
        "props": {
          "inline": true,
          "formItemWidth": "60%"
        }
      }
    }
  },
  "ctx": "edit",
  "data": {
    "text2": "我是data里定义的默认值",
    "date": 1539792000000
  }
}
显示配置 在线运行

# 行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。通过 props.inline: true 配置来实现。注意：这种是整个表单显示在同一行，直到一行放不下才会换行。

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本1",
        "type": "text",
        "default": "我是resource里定义的默认值"
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "props": {
    "inline": true
  }
}
显示配置 在线运行

# 展示状态表单

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

双11活动
双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动
3.7
龙须面
双皮奶，蚵仔煎
{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "文本",
        "type": "text"
      },
      "date": {
        "type": "switch",
        "label": "开关"
      },
      "textarea": {
        "type": "textarea",
        "label": "内容"
      },
      "color": {
        "type": "color",
        "label": "颜色"
      },
      "rate": {
        "type": "rate",
        "label": "评分"
      },
      "radio": {
        "type": "radio",
        "label": "单选",
        "props": {
          "options": {
            "a": "黄金糕",
            "b": "双皮奶",
            "c": "蚵仔煎",
            "d": "龙须面",
            "e": "北京烤鸭"
          }
        }
      },
      "checkbox": {
        "type": "checkbox",
        "label": "多选",
        "props": {
          "options": {
            "a": "黄金糕",
            "b": "双皮奶",
            "c": "蚵仔煎",
            "d": "龙须面",
            "e": "北京烤鸭"
          }
        }
      }
    }
  },
  "ctx": "view",
  "data": {
    "text": "双11活动",
    "switch": 1,
    "textarea": "双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动双11活动",
    "color": "#f00",
    "rate": 3.7,
    "radio": "d",
    "checkbox": "b,c"
  }
}
显示配置 在线运行

# 分组的表单

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

其它表单
0
{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "文本",
        "type": "text"
      },
      "date": {
        "type": "switch",
        "label": "开关"
      },
      "textarea": {
        "type": "textarea",
        "label": "内容"
      },
      "color": {
        "type": "color",
        "label": "颜色"
      },
      "rate": {
        "type": "rate",
        "label": "评分"
      }
    }
  },
  "ctx": "edit",
  "events": {
    "init": "@console",
    "submit": "@validate @confirm:确认提交吗? @update"
  },
  "actions": {
    "fieldChange": function(e) {
      var t = e.name,
        a = e.value;
      "testSwitch" === t && (this.block.fields.testPassword.props.disabled = !a)
    }
  },
  "operations": {
    "submit": {
      "type": "button",
      "label": "提交",
      "props": {
        "type": "primary"
      }
    },
    "cancel": {
      "type": "button",
      "label": "取消"
    }
  },
  "blocks": {
    "formSlotTitle": {
      "type": "title",
      "options": {
        "title": "其它表单"
      },
      "style": {
        "marginLeft": "50px"
      },
      "slot": "field:textarea"
    }
  }
}
显示配置 在线运行

# 顶部slot block

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

主标题
{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本",
        "type": "text"
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "blocks": {
    "title1": {
      "type": "title",
      "options": {
        "title": "主标题"
      },
      "slot": "top"
    }
  }
}
显示配置 在线运行

# 表单键盘enter事件监听

通过 on.keyupEnter 可监听表单输入项中的键盘enter事件触发

{
  "type": "form",
  "resource": {
    "fields": {
      "text": {
        "label": "新文本",
        "type": "text"
      },
      "date": {
        "type": "date",
        "label": "日期"
      },
      "password": {
        "type": "password",
        "label": "密码"
      }
    }
  },
  "ctx": "edit",
  "on": {
    "keyupEnter": function(e) {
      console.log("keyup.enter.native", this, e), alert("你触发enter了")
    }
  }
}
显示配置

# 在线实验室

基础设置
form
可用slot：top field:{fieldName}
更多设置
效果预览
2
子block示例

最终配置

参数列表

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

← Grid 网格布局 →