el-table+el-form 实现el-table中必填

最新推荐文章于 2024-10-22 16:09:14 发布

� 杰尼龟

最新推荐文章于 2024-10-22 16:09:14 发布

阅读量934

点赞数

文章标签： vue javascript html

本文链接：https://blog.csdn.net/weixin_45124380/article/details/113239398

版权

本文介绍了在Vue.js项目中使用el-table和el-form时遇到的必填项验证错误，错误提示为'please transfer a valid prop path to form item!'。错误的根本原因是prop的字段名与rules中的定义不符。解决方案在于确保两者名称的一致性，特别是在表格形式的表单验证场景中。提供了解决该问题的相关代码片段。

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

错误

vue.js:6 Error: please transfer a valid prop path to form item!

原因

prop的内容和rules中定义的名称不一致！应注意要一致
一般出现在table中form验证

代码

<el-form :model="serviceCheckForm" ref="serviceCheckForm"  :rules="rules" size="small">
						<el-table border :data="serviceCheckForm.serviceForm" ref="table" tooltip-effect="dark" size="mini" height="auto" width="1000">


							<el-table-column  min-width="80">
								<template slot="header">
								  <p>
								    姓名
								    <span style="color:red;font-size:16px;">*</span>
								  </p>
								</template>
								<template slot-scope="scope" >
									<el-form-item :prop="'serviceForm.'+scope.$index+'.name'" :rules="rules.name">
										<el-select v-model="scope.row.name" placeholder="请选择" filterable>
											<el-option v-for="item in members" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>

							<el-table-column  min-width="120">
								<template slot="header">
								  <p>
								    年龄
								    <span style="color:red;font-size:16px;">*</span>
								  </p>
								</template>
								<template slot-scope="scope">
									<el-form-item :prop="'serviceForm.'+scope.$index+'.age'" :rules="rules.age">
									<el-date-picker v-model="scope.row.enddate" type="date" placeholder="选择日期" style="width: 120px;">
									</el-date-picker>
									</el-form-item>
								</template>
							</el-table-column>

						</el-table>
						</el-form>

			serviceCheckForm:{
				
			},
      rules: {
        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        age: [{ required: true, message: "年龄不能为空", trigger: "blur" }],
      },


		async method(){
			this.$refs.serviceCheckForm.validate(async valid => {
				if (valid){
			const loading = this.$loading(LOAD_STYLE);	
					try {
						let res = await axios.post('api/xx/xx', this.serviceForm);
						if (res.code === 200) {

						}else {
	
						}
					} catch (e) {
						this.$message.error('请求出错！', e.message);
					}
					// 关闭加载框
					loading.close();

			
			}
			})
			}

,
method2(index, row) {
			this.serviceForm = deepCopy(row)	
			this.$set(this.serviceCheckForm,"serviceForm",this.serviceForm)
		},

``