包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

    在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

    W3C 标准中有如下：

    即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。

    行内表单

    当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

    Form 表单 - 图1

    1. <el-form :inline="true" :model="formInline" class="demo-form-inline">
    2.   <el-form-item label="审批人">
    3.     <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    4.   </el-form-item>
    5.   <el-form-item label="活动区域">
    6.     <el-select v-model="formInline.region" placeholder="活动区域">
    7.       <el-option label="区域一" value="shanghai"></el-option>
    8.       <el-option label="区域二" value="beijing"></el-option>
    9.     </el-select>
    10.   </el-form-item>
    11.   <el-form-item>
    12.     <el-button type="primary" @click="onSubmit">查询</el-button>
    13.   </el-form-item>
    14. </el-form>
    15. <script>
    16.   export default {
    17.     data() {
    18.       return {
    19.         formInline: {
    20.           user: '',
    21.           region: ''
    22.         }
    23.       }
    24.     },
    25.     methods: {
    26.       onSubmit() {
    27.         console.log('submit!');
    28.       }
    29.     }
    30.   }
    31. </script>

    对齐方式

    根据具体目标和制约因素，选择最佳的标签对齐方式。

    通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

    表单验证

    在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

    Form 表单 - 图2

    Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

    1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    2.   <el-form-item label="活动名称" prop="name">
    3.     <el-input v-model="ruleForm.name"></el-input>
    4.   </el-form-item>
    5.   <el-form-item label="活动区域" prop="region">
    6.     <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
    7.       <el-option label="区域一" value="shanghai"></el-option>
    8.       <el-option label="区域二" value="beijing"></el-option>
    9.     </el-select>
    10.   </el-form-item>
    11.   <el-form-item label="活动时间" required>
    12.     <el-col :span="11">
    13.       <el-form-item prop="date1">
    14.         <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
    15.       </el-form-item>
    16.     </el-col>
    17.     <el-col class="line" :span="2">-</el-col>
    18.     <el-col :span="11">
    19.       <el-form-item prop="date2">
    20.         <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
    21.       </el-form-item>
    22.     </el-col>
    23.   </el-form-item>
    24.   <el-form-item label="即时配送" prop="delivery">
    25.     <el-switch v-model="ruleForm.delivery"></el-switch>
    26.   </el-form-item>
    27.   <el-form-item label="活动性质" prop="type">
    28.     <el-checkbox-group v-model="ruleForm.type">
    29.       <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
    30.       <el-checkbox label="地推活动" name="type"></el-checkbox>
    31.       <el-checkbox label="线下主题活动" name="type"></el-checkbox>
    32.       <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    33.     </el-checkbox-group>
    34.   </el-form-item>
    35.   <el-form-item label="特殊资源" prop="resource">
    36.     <el-radio-group v-model="ruleForm.resource">
    37.       <el-radio label="线上品牌商赞助"></el-radio>
    38.       <el-radio label="线下场地免费"></el-radio>
    39.     </el-radio-group>
    40.   </el-form-item>
    41.   <el-form-item label="活动形式" prop="desc">
    42.     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    43.   </el-form-item>
    44.   <el-form-item>
    45.     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    46.     <el-button @click="resetForm('ruleForm')">重置</el-button>
    47.   </el-form-item>
    48. <script>
    49.   export default {
    50.     data() {
    51.       return {
    52.         ruleForm: {
    53.           name: '',
    54.           region: '',
    55.           date1: '',
    56.           date2: '',
    57.           delivery: false,
    59.           resource: '',
    60.           desc: ''
    61.         },
    62.         rules: {
    63.           name: [
    64.             { required: true, message: '请输入活动名称', trigger: 'blur' },
    65.             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    66.           ],
    67.           region: [
    68.             { required: true, message: '请选择活动区域', trigger: 'change' }
    69.           ],
    70.           date1: [
    71.             { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    72.           ],
    73.           date2: [
    74.             { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
    75.           ],
    76.           type: [
    77.             { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
    78.           ],
    79.           resource: [
    80.             { required: true, message: '请选择活动资源', trigger: 'change' }
    81.           ],
    82.           desc: [
    83.             { required: true, message: '请填写活动形式', trigger: 'blur' }
    84.           ]
    85.         }
    86.       };
    87.     },
    88.     methods: {
    89.       submitForm(formName) {
    90.         this.$refs[formName].validate((valid) => {
    91.           if (valid) {
    92.             alert('submit!');
    93.           } else {
    94.             console.log('error submit!!');
    95.             return false;
    96.           }
    97.         });
    98.       },
    99.       resetForm(formName) {
    100.         this.$refs[formName].resetFields();
    101.       }
    102.     }
    103.   }
    104. </script>

    自定义校验规则

    这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

    自定义校验 callback 必须被调用。 更多高级用法可参考 。

    Form 表单 - 图3

    除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

    1. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    2.   <el-form-item
    3.     prop="email"
    4.     label="邮箱"
    5.     :rules="[
    6.       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    7.       { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    8.     ]"
    9.   >
    10.     <el-input v-model="dynamicValidateForm.email"></el-input>
    11.   </el-form-item>
    12.   <el-form-item
    13.     v-for="(domain, index) in dynamicValidateForm.domains"
    14.     :label="'域名' + index"
    15.     :key="domain.key"
    16.     :prop="'domains.' + index + '.value'"
    17.     :rules="{
    18.       required: true, message: '域名不能为空', trigger: 'blur'
    19.     }"
    20.   >
    21.     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
    22.   </el-form-item>
    23.   <el-form-item>
    24.     <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    25.     <el-button @click="addDomain">新增域名</el-button>
    26.     <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
    27.   </el-form-item>
    28. </el-form>
    29. <script>
    30.   export default {
    31.     data() {
    32.       return {
    33.         dynamicValidateForm: {
    34.           domains: [{
    35.             value: ''
    36.           }],
    37.         }
    38.       };
    39.     },
    40.     methods: {
    41.       submitForm(formName) {
    42.         this.$refs[formName].validate((valid) => {
    43.           if (valid) {
    44.             alert('submit!');
    45.           } else {
    46.             console.log('error submit!!');
    47.             return false;
    48.           }
    49.         });
    51.       resetForm(formName) {
    52.         this.$refs[formName].resetFields();
    53.       },
    54.       removeDomain(item) {
    55.         var index = this.dynamicValidateForm.domains.indexOf(item)
    56.         if (index !== -1) {
    57.           this.dynamicValidateForm.domains.splice(index, 1)
    58.         }
    59.       },
    60.       addDomain() {
    61.         this.dynamicValidateForm.domains.push({
    62.           value: '',
    63.           key: Date.now()
    64.         });
    65.       }
    66.     }
    67.   }
    68. </script>

    数字类型验证

    数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

    嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

    表单内组件尺寸控制

    通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。

    Form 表单 - 图4

    1. <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
    2.   <el-form-item label="活动名称">
    3.     <el-input v-model="sizeForm.name"></el-input>
    4.   </el-form-item>
    5.   <el-form-item label="活动区域">
    6.     <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
    7.       <el-option label="区域一" value="shanghai"></el-option>
    8.       <el-option label="区域二" value="beijing"></el-option>
    9.     </el-select>
    10.   </el-form-item>
    11.   <el-form-item label="活动时间">
    12.     <el-col :span="11">
    13.       <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
    14.     </el-col>
    15.     <el-col class="line" :span="2">-</el-col>
    16.     <el-col :span="11">
    17.       <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
    18.     </el-col>
    19.   </el-form-item>
    20.   <el-form-item label="活动性质">
    21.     <el-checkbox-group v-model="sizeForm.type">
    22.       <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
    23.       <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
    24.       <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
    25.     </el-checkbox-group>
    26.   </el-form-item>
    27.   <el-form-item label="特殊资源">
    28.     <el-radio-group v-model="sizeForm.resource" size="medium">
    29.       <el-radio border label="线上品牌商赞助"></el-radio>
    30.       <el-radio border label="线下场地免费"></el-radio>
    31.     </el-radio-group>
    32.   </el-form-item>
    33.   <el-form-item size="large">
    34.     <el-button type="primary" @click="onSubmit">立即创建</el-button>
    35.     <el-button>取消</el-button>
    36.   </el-form-item>
    37. </el-form>
    39. <script>
    40.   export default {
    41.     data() {
    42.       return {
    43.         sizeForm: {
    44.           name: '',
    45.           region: '',
    46.           date1: '',
    47.           date2: '',
    48.           delivery: false,
    49.           type: [],
    50.           resource: '',
    51.           desc: ''
    52.         }
    53.       };
    54.     },
    55.     methods: {
    56.       onSubmit() {
    57.         console.log('submit!');
    58.       }
    59.     }
    60.   };
    61. </script>

    Form Attributes

    Form Methods

    方法名说明参数
    validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))
    validateField对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: string))
    resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果—
    clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果Function(props: array | string)

    Form-Item Attributes

    参数说明类型可选值默认值
    prop表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的string传入 Form 组件的 model 中的字段—
    label标签文本string——
    label-width表单域标签的的宽度，例如 ‘50px’。支持 auto。string——
    required是否必填，如不设置，则会根据校验规则自动生成boolean—false
    rules表单验证规则object——
    error表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息string——
    show-message是否显示校验错误信息boolean—true
    inline-message以行内形式展示校验信息boolean—false
    size用于控制该表单域下组件的尺寸stringmedium / small / mini-

    Form-Item Slot

    Form-Item Scoped Slot

    name说明
    error自定义表单校验信息的显示方式，参数为 { error }

    Form-Item Methods