1。element-ui提供了一系列的表单组件，包括表单域、各种输入组件等，使用起来非常方便，布局、数据校验、表单重置等功能齐全。下面我们看一下常用功能的实现。https://element.eleme.cn/#/zh...2.表单域组件和表单项组件...data(){返回{data:{name:''},rules:{name:[{required:true,message:'请输入户主姓名',trigger:'blur'}]}}}是表单字段组件。示例中组件的属性是：`model`是表单域内部绑定的每个表单域的对象。`rules`是表单域中每个表单数据的校验规则对象。`ref`是vue的内置属性，用于获取表单字段元素对象。`label-width`用于指定表单域中表单项组件对应标题的宽度。是一个表单项容器组件，里面可以放置多个表单组件。`label`是表单项的标题名称。`prop`是要验证的字段的名称。3、每个表单项组件的布局都是父元素宽度的100%。所以默认情况下，一个表单项占据表单域的一行。如果想在一行中放置多个表单项，可以在组件上设置属性：inline="true"，这样每个表单项组件渲染的元素都是行内元素（display:inline-堵塞）。或者，可以使用组件来控制布局。如：4.数据验证4.1简单验证...data(){返回{数据：{姓名：''},rules:{name:[{required:true,message:'请输入户主姓名',trigger:'blur'}]}}}data为数据对象，rules为校验规则对象.一致。如果需要对表单数据进行校验，则在表单项组件中添加prop属性。因此，可能存在组件的嵌套：外层组件用于控制作用域，没有prop属性；内部组件仅用于控制验证，没有标签属性。例如：预订酒店时的入住时间，包括开始时间和结束时间，先用一个控制“入住时间”标题下的两个表单组件，然后使用一个来控制开始时间和结束时间字段的数据验证。嵌套在中的组件的标题宽度默认为0（不继承组件的标签宽度）。如果需要，可以为内部的组件单独设置label-width。Validationrules（规则）：字段的每条校验规则都使用一个对象描述。一个字段可以设置多个校验规则，用数组来描述。校验规则对象通常包含以下属性：`required`：设置为true，则为required/selected，表单项组件渲染后，在title文本前添加一个红色星号。`type`：数据类型验证。`max`/`min`：数据长度检查。`message`：错误信息。`trigger`：验证触发的事件，比如blur，change等。数据验证是有序的，按照规则中数组的顺序进行。上次验证失败后，将不进行后续验证。默认情况下，错误消息显示在表单元素下方。如果要内联显示错误消息，请在组件中将inline-message设置为true。4.2自定义验证自己设置验证规则。在rules中设置validator属性，属性值为校验函数。...rules:{phone:[{validator:validatePhone,trigger:'blur'}],...验证函数可以写在vue对象的data中，方便在rules中使用。data(){varvalidatePhone=function(rule,value,callback){if(!/1\d{10}/.test(value)){callback(newError('请输入正确的电话号码'));}else{回调();}}return{data:{...该函数包括三个参数，rule是一个包含字段相关信息的对象。value是要验证的表单的值。callback是element-ui的自定义回调。验证成功后，不带参数直接执行回调。当验证失败时，需要将回调参数设置为一个Error对象，并传入提示信息。5、关于5.1宽度问题默认宽度小于组件，会导致表单不够整齐。您需要在组件中添加style属性来设置宽度。5.2默认值组件默认没有默认值。如果要设置，直接设置v-model对应的字段值即可。data(){returndata{...sex:'0'}}6.组件通常带有自己的方法validate：表单数据的整体验证。常用于在数据提交前依次验证表单中的数据。参数为回调函数，回调函数的参数为??校验结果。methods:{submit:function(){this.$refs[form].validate((valid)=>{if(valid){//验证成功...}else{//验证失败...}});},...}resetFields：将表单数据重置为初始值，并清除验证信息。
