elementui 表单v-molde是动态的，校验表单字段为必填项

最新推荐文章于 2024-08-27 10:20:49 发布

原创最新推荐文章于 2024-08-27 10:20:49 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

本文介绍如何在ElementUI中使用v-model动态绑定表单，并确保动态字段为必填项进行有效验证。

<!--按钮部分-->
<el-button type="primary" @click="Setup('setup1')">按钮一</el-button>
<el-button type="primary" @click="Setup('setup2')">按钮二</el-button>
<!--form部分-->
<div>{{$data[SetupList].titleName}}</div>
<el-form :model="$data[SetupList]" >
<div v-for="(item,index) in $data[SetupList].Setup" class="Setup" :key="index">
	<el-form-item :prop="'Setup.' + index + '.name'" :rules="[{required:true, message: '请输入字段名', trigger: 'blur'},{ min: 4, max: 4, message: '字段名必须为四个字', trigger: 'blur' }]">               
          <el-input size="small" v-model="item.name" placeholder="输入字段名" ></el-input>
    </el-form-item>
</div>
</el-form>
<!--data部分-->
data(){
	return{
	setup1:{
		titleName:"按钮一校验"，
		Setup:[
               {lable:'字段一',name:''},
               {lable:'字段二',name:''},
               {lable:'字段三',name:''},
               {lable:'字段四',name:''},
           ],
	   },
	   setup2:{
		titleName:"按钮二校验"，
		Setup:[
               {lable:'字段一',name:''},
               {lable:'字段二',name:''},
               {lable:'字段三',name:''},
               {lable:'字段四',name:''},
           ],
	   },
	   SetupList:"setup1",
	}
}
/*methods部分*/
Setup(name){
	this.SetupList = name
}