Element Form表单、验证总汇

一、el-form model绑定的值，必须是对象，不能是数组
二、每一项v-model绑定的值 （1）必须取自el-form model绑定的值（2) 要跟rules内验证的属性值一致
三、每一项动态的prop，必须取自el-form model绑定的值

1、table内可编辑 表单验证、自定义验证

html

<el-form :model="formData" :rules="rules" >
	<el-table :data="formData.tableData" style="width: 100%">
		<el-table-column prop="date" label="日期" width="180"></el-table-column>
		<el-table-column prop="name" label="姓名" width="180"></el-table-column>
		<el-table-column label="数量" width="180">
			<template scope="scope">
				<el-form-item :prop="'tableData.'+scope.$index+'.value'" :rules="rules.value">
					<el-input v-model="scope.row.value" placeholder="请输入信息"></el-input>
				</el-form-item>
			</template>
		</el-table-column>
		<el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
</el-form>

js

data() {
	return {
		rules:{
			value:[
				{required: true, message: '请输入', trigger: 'blur'},
				{validator: this.number, trigger: 'blur'}
			]
		},
		formData: {
			tableData:[
				{ date: '2016-05-02', name: '王小虎', address: '金沙江路 1518 弄', value:2, maxValue:10,}, 
				{ date: '2016-05-04', name: '王小虎', address: '金沙江路 1517 弄', value:3, maxValue:20,}
			]
		}
	}
},
methods:{
    number(rule, value, callback){
	    let index = Number(rule.field.split('.')[1])//获取当前验证项的index，对应数据的index
	    if(value > this.formData.tableData[index].maxValue){
	      	callback(new Error('请输入小于'+this.formData.tableData[index].maxValue+'的值'))
	    }else {
	    	callback()
	    }
    },
  }

效果图

2、select切换，对应的表单项验证

需求：当切换选项时，清空验证。(否则，会遗留上一选项的错误提示)

两种常见情况及处理方式：
一，只有2个选项——
以下处理方式：切换选项后，验证提示会消失，而且值不会被清空，就不用再监听select的change事件，只需要保存的时候做判断，把没选中的项对应的值清空。


二、多个选项——
监听select的change事件，重置初始值清空验证

<el-form-item label="优惠方式">
    <el-select v-model="dataForm.depreciateType" placeholder="请选择" @change="handleSelectType">
        <el-option :value=1 label="满减券"></el-option>
        <el-option :value=2 label="折扣券"></el-option>
        <el-option :value=3 label="专项券"></el-option>
    </el-select>
</el-form-item>

handleSelectType(){
	//1—、清除所有验证，并重置为初始值
	this.$refs['dataForm'].resetFields()
	//2、只重置初始需要的切换项，给对应的el-form-item加ref
	this.$refs['conditions'].resetField()
}