1.校验当前行表单：
<template slot-scope="scope"> <el-form :model="scope.row" :rules='rulesEdit' :ref='"numberValidateForm"+scope.$index' class="demo-ruleForm"> <el-form-item label="" prop='discountRate' :rules='rulesEdit.discountRate' > <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.discountRate"></el-input> </el-form-item> </el-form> <span v-show="!scope.row.show">{{scope.row.discountRate}}</span> </template>
data(){
return{
rulesEdit: {
discountRate:[
{ required: true, message: '折扣比例不能为空'},
{ validator:Validator.number, message: '折扣比例必须为数字值',trigger:'blur'}
]
}
}
}
},
methods:{
this.$refs['numberValidateForm'+index].validate((valid) => {
if (valid) {
this.$set(this.gridData['data'],index,row);
row.show=false;
} else {
console.log('error submit!!');
return false;
}
});</pre>
}
2.校验table内全部可编辑框
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<div id="app">
<el-button type="primary" v-on:click="submitForm('ruleForm')">测试</el-button>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-table :data="ruleForm.tableData" style="width: 100%">
<el-table-column label="日期" width="280">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules='rules.test'>
<el-input style="width:100%" v-model="scope.row.date" ></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-form>
</div>
var Main = {
data() {
return {
ruleForm: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
},
rules: {
test: [
{ required: true, message: '请输入日期', trigger: 'change' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}