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

最新推荐文章于 2024-06-20 20:43:52 发布

sunshine0670

最新推荐文章于 2024-06-20 20:43:52 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/lifangfang0607/article/details/106125701

版权

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

摘要由CSDN通过智能技术生成

循环渲染的表单，添加字段校验，提交表单时判断校验结果，使用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

最低0.47元/天解锁文章

sunshine0670

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
elementui循环渲染的表单添加字段的校验

循环渲染的表单，添加字段校验，提交表单时判断校验结果，使用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" :mode
复制链接

扫一扫

专栏目录