Element Form表单、验证总汇

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()
	    }
    },
  }

效果图

注意
一、el-form model绑定的值，必须是对象，不能是数组
二、每一项v-model绑定的值 （1）必须跟form绑定的formData内的值一致（2) 要跟rules内验证的属性值一致。否则验证无效