[@vue/cli & element-ui] form表单

1.简介

element-ui提供了一系列的表单组件，包括表单域，各种input组件等。使用起来确实方便，布局、数据校验、表单重置等功能齐全。这里我们看一下常见功能的实现。
https://element.eleme.cn/#/zh...

2.表单域组件与表单项组件

<el-form :model="data" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="户主姓名" prop="name">
        <el-input v-model="data.name"></el-input\>
    </el-form-item>
</el-form>

...

data(){
    return {
        data: {
            name: ''
        },
        rules: {
            name: [{ required: true, message: '请输入户主姓名', trigger: 'blur' }]
        }
    }
}

<el-form> 是表单域组件，示例中组件包含的属性有：

`model` 是表单域内部绑定的各个表单字段的对象。
`rules` 是表单域内部各个表单数据的校验规则对象。
`ref` 是vue自带属性，用于获取表单域元素对象。
`label-width` 用来指定表单域内表单项组件对应标题的宽度。

<el-form-item> 是表单项容器组件，内部可以放置多个表单组件。

`label` 是表单项的标题名称。
`prop` 是需要校验的字段名称。

3.布局

每一个表单项组件是占父元素100%宽度的。因此默认情况下，一个表单项会占据表单域的一行。
如果想要在一行放置多个表单项，可以在<el-form>组件上设置属性:inline="true"，这样，每一个表单项组件最终渲染出来的元素都是行内元素（display:inline-block）。
或者，可以使用<el-col>组件来控制布局。如：

<el-form :model="data" :rules="rules" ref="form" label-width="100px">
    <el-col :span="10">
        <el-form-item label="户主姓名" prop="name">
            <el-input v-model="data.name"></el-input\>
        </el-form-item>
    </el-col>
    <el-col :span="10">
        <el-form-item label="户主性别" prop="sex">
            <el-select v-model="data.sex" style="width:100%">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
            </el-select>
        </el-form-item>
    </el-col>
</el-form>

4.数据校验

4.1简单校验

<el-form :model="data" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="户主姓名" prop="name">
        <el-input v-model="data.name"></el-input\>
    </el-form-item>
</el-form>

...

data(){
    return {
        data: {
            name: ''
        },
        rules: {
            name: [{ required: true, message: '请输入户主姓名', trigger: 'blur' }]
        }
    }
}

data是数据对象，rules是校验规则对象。同一字段两者属性名称保持一致。表单数据需要校验，则在表单项组件上添加prop属性。

因此可能会出现<el-form-item>组件嵌套的情况：外层组件用来控制范围，不加prop属性；内层组件仅用来控制校验，不加label属性。如：酒店预定时的入住时间，包括起始时间和结束时间，首先用一个<el-form-item>控制两个表单组件都在“入住时间”这个标题下，然后分别用一个<el-form-item>来控制起始时间和结束时间字段的数据校验。

嵌套在<el-form-item>内的<el-form-item>组件，其标题宽度默认为0（不继承<el-form>组件的label-width）属性。如有需要可以单独给内部的<el-form-item>组件设置label-width。

校验规则（rules）：字段的每一个校验规则使用对象描述。一个字段可以设置多个校验规则，用数组描述。校验规则对象通常包括以下属性：

`required`：设置为true，则为必填/比选，表单项组件渲染后会在标题文字前加上一个红色星号。
`type`：数据类型校验。
`max`/`min`：数据长度校验。
`message`：错误提示信息。
`trigger`：校验触发的事件，如blur、change等。

数据校验是存在顺序的，按照规则中数组的顺序进行，前边的校验失败后，后边的校验就不再进行。

错误提示信息默认在表单元素下方展示。

如果想要以行内形式展示错误提示信息，在<el-form-item>组件中设置inline-message为true。

4.2自定义校验

自己设置校验规则。
rules中，设置validator属性，属性值为校验函数。

...

rules: {
    phone: [{
        validator: validatePhone, trigger: 'blur'
    }],
    
...

校验函数可以写在vue对象的data中，方便在rules中使用。

data(){
    var validatePhone = function(rule, value, callback){
        if(!/1\d{10}/.test(value)){
            callback(new Error('请输入正确的手机号'));
        }else{
            callback();
        }
    }
    return {
        data : {
        
    ...

函数包括三个参数，rule是一个对象，包含了字段的相关信息。value是要校验的表单的value值。callback是element-ui自定义的回调。校验成功时，直接执行callback不加参数。校验失败时，需要将callback参数设置为一个Error对象，并传入提示信息。

5.关于<el-select>

5.1 宽度问题

默认宽度小于<el-input>组件，会使表单不够整齐。需要自行给组件增加style属性设置宽度。

<el-select v-model="data.sex" style="width:100%">
    <el-option label="男" value="0"></el-option>
    <el-option label="女" value="1"></el-option>
</el-select>

5.2默认值

<el-select>组件默认没有默认值。如要设置，直接设置v-model对应的字段值即可。

data(){
    return data{
        ...
        sex: '0'
    }
}

6.<el-form>组件常用自带方法

validate：表单数据整体校验。经常用在数据提交之前，对表单内的数据依次进行验证。参数为一个回调函数，回调函数的参数是校验的结果。

methods: {
    submit: function(){
        this.$refs[form].validate((valid) => { 
            if(valid){
                //验证成功
                ...
            }else{
                //验证失败
                ...
            }
        });
    },
    
    ...
}           

resetFields：表单数据重置为初始值，并清除校验信息。