VUE 表格中添加表单验证
作者:互联网
表格数据有多行,针对每一行的input输入值加入表单验证,关键代码是::prop="'data1.'+scope.$index+'.newBudget'"
<div> <el-form ref="form1" :model="readyUpdateNodes" label-width="150px"> <el-table :data="readyUpdateNodes.data1" :span-method="changeUpdateType" align="center" border stripe class="table1" > <el-table-column prop="campaignName" align="center" label="广告组名称"> <template slot-scope="{row}"> {{ row.campaignName }} </template> </el-table-column> <el-table-column prop="budget" align="center" label="当前预算"> <template slot-scope="{row}"> {{ (row.budgetModeDesc ? row.budgetModeDesc : '') + '\t' + (row.budget ? row.budget : '--') }} </template> </el-table-column> <el-table-column align="center" label="修改预算"> <template slot-scope="scope"> <el-form-item label="预算" :prop="'data1.'+scope.$index+'.newBudget'" :rules="readyUpdateNodes.fromaDataRules.newBudget"> <el-input v-model.number="scope.row.newBudget" @input="updateBudget($event)" /> <span v-if="scope.row.newBudget==='0'||scope.row.newBudget===0" class="messageTip">0为不限预算</span> </el-form-item> </template> </el-table-column> </el-table> </el-form> </div>
data() { var validateBuget = (rule, value, callback) => { if (value === '') { callback(new Error('请输入预算')) } // if (value === 0 || value === '0') { // callback(new Error('0为预算不限')) // } if ((value > 0 && value < 300) || value > 20000) { callback(new Error('预算金额范围为[300, 20000],请修改')) } callback() } return { readyUpdateNodes: { 'data1': [], 'fromaDataRules': { newBudget: [ { required: true, message: '请输入预算', trigger: 'blur' }, { validator: validateBuget, trigger: 'blur' } ] } } } }
效果:
标签:VUE,表格,value,表单,callback,Error,预算,new,row 来源: https://www.cnblogs.com/lulu-beibei/p/15937387.html