elementui循环渲染的表单添加字段的校验

最新推荐文章于 2023-04-21 23:03:10 发布

sunshine0670

最新推荐文章于 2023-04-21 23:03:10 发布

阅读量1.2k

点赞数

分类专栏： Vue element-ui 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/lifangfang0607/article/details/106125701

版权

Vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

element-ui

3 篇文章

订阅专栏

本文介绍了在使用ElementUI时遇到的循环渲染表单并进行字段校验的问题。在尝试通过this.$refs[("item" + index)].validate进行校验时，发现报错提示该方法不存在。解决方法是改用this.$refs["item"][0].validate进行调用。文中给出了具体的html代码、验证规则代码和提交时判断校验状态的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环渲染的表单，添加字段校验，提交表单时判断校验结果，使用this.$refs[(“item” + index)].validate会报错
this.$refs[(“item” + index)].validate is not a function
需要这么使用：
this.$refs[“item”][0].validate

下面是项目中的代码：

html代码

<el-form
	v-for="(item,index) in receiptInfoList"
	:key="index"
	:model="item"
	:ref="'item'+index"
	:rules="item.moneyRules"
	label-width="0">
	<el-row :gutter="10">
		<el-col :lg="2" :sm="8">
			<el-form-item :label="item.stageName" label-width="90px"></el-form-item>
		</el-col>
		<el-col :lg="4" :sm="8">
			<el-form-item prop='estimatedReceivable'>
				<el-input v-model="item.estimatedReceivable" :disabled="!item.editState"></el-input>
			</el-form-item>
		</el-col>
		<el-col :lg="4" :sm="8">
			<el-form-item>
				<el-date-picker :disabled="!item.editState" type="date" v-model="item.estimatedReceivableTime" style="width: 100%"></el-date-picker>
			</el-form-item>
		</el-col>
		<el-col :lg="4" :sm="8">
			<el-form-item>
				<el-date-picker :disabled="!item.editState" type="date" v-model="item.acceptanceTime" style="width: 100%"></el-date-picker>
			</el-form-item>
		</el-col>
		<el-col :lg="4" :sm="8">
			<el-form-item prop='actualReceivable'>
				<el-input :disabled="!item.editState" v-model="item.actualReceivable"></el-input>
			</el-form-item>
		</el-col>
		<el-col :lg="4" :sm="8">
			<el-form-item>
				<el-date-picker :disabled="!item.editState" type="date" v-model="item.actualReceivableTime" style="width: 100%"></el-date-picker>
			</el-form-item>
		</el-col>
		<el-col :lg="2" :sm="8">
			<div class="collectEdit" v-if="!item.editState">
				<el-button type="text" @click="openReceivableEdit(item)">编辑</el-button>
				<el-button type="text" class="deleteBtnClass" @click="deleteReceivable(item)">删除</el-button>
			</div>
			<div class="collectEdit" v-else>
				<el-button type="text" style="color: #00b83f" @click="updateReceivable(item,index)">保存</el-button>
				<el-button type="text" class="deleteBtnClass" @click="cancelReceivable">取消</el-button>
			</div>
		</el-col>
		<el-col :span="12" v-show="item.editState">
			<el-form-item label="收款条件" label-width="85px">
				<el-input type="textarea" v-model="item.receivableCondition"></el-input>
			</el-form-item>
		</el-col>
	</el-row>
</el-form>

验证规则代码

moneyRules:{
	'estimatedReceivable':[
		{required:true,trigger:'blur',message:'请输入计划收款'},
		{
			validator: (rule,value,cb)=>{
				let reg = /^[0-9]*[1-9][0-9]*$/
				if(!reg.test(value)){
					cb(new Error('请输入非零整数'))
				}else{
					cb()
				}
			},
			required:true,trigger:'blur'
		}
	],
	'actualReceivable':[
		// {required:false,trigger:'blur',message:'请输入实际收款'},
		{
			required:false,
			validator: (rule,value,cb)=>{
				// console.log(value,1111111111)
				if(value == '' || value == null){
					cb()
				}else{
					let reg = /^[0-9]*[1-9][0-9]*$/
					if(!reg.test(value)){
						cb(new Error('请输入非零整数'))
					}else{
						cb()
					}
				}
			},
			trigger:'change',
		}
	]
}

提交时判断校验状态

// 修改收款信息
updateReceivable(val,index){
	// console.log(val)
	// console.log('item'+index)
	let reff = 'item'+index
	this.$refs[reff][0].validate((valid) => {  //此处不加[0]会报错===》this.$refs[("item" + index)].validate is not a function
		console.log(valid);
		if(valid){
			val.actualTime = val.actualTime == null ?  null : moment(val.actualTime).format('YYYY-MM-DD')
			val.finishTime = val.finishTime == null ?  null : moment(val.finishTime).format('YYYY-MM-DD')
			val.estimatedReceivableTime = val.estimatedReceivableTime == null ?  null : moment(val.estimatedReceivableTime).format('YYYY-MM-DD')
			val.actualReceivableTime = val.actualReceivableTime == null ?  null : moment(val.actualReceivableTime).format('YYYY-MM-DD')
			
			this.$$api_project_updateReceivable({
				data: val,
				fn: () => {
					this.$message.success('提交成功')
					this.loadReceivableList()
				}
			})
		}
	})
	return false;
},