vue+elementui 实现动态必填表单项操作
实现表单项动态必填功能,目前看到方法有两种1.在必填的el-form-item 写两个一样的,一个有rules一个没,然后用v-if去动态判断2.现在要说的是方法2,大部分网上看的都是用方法一的方式,而且基本都copy的文章1)首先在data()数据定义中先定义个布尔值isIpv4:true, //是否是必填项2)在html页面部分写动态的rules<el-form-item...
·
实现表单项动态必填功能,目前看到方法有两种
1.在必填的el-form-item 写两个一样的,一个有rules一个没,然后用v-if去动态判断
2.现在要说的是方法2,大部分网上看的都是用方法一的方式,而且基本都copy的文章
1)首先在data()数据定义中先定义个布尔值
isIpv4:true, //是否是必填项
2)在html页面部分写动态的rules
<el-form-item label="封堵IP" prop="oip" :rules="[{required:isIpv4,message:'请输入封堵IP',trigger:'blur'}]">
3)在js部分凡是有用到isIpv4的地方全部加一个$nextTick方法
ipProtocolChange(val){
this.$nextTick(()=>{
if(val == 1){
this.isIpv4 = true;
}else if(val == 2){
this.isIpv4 = false;
this.$refs['plugParamsFormRef'].clearValidate();
}
});
},
上面这个方法是下拉操作动态改变页面是否校验的功能。
方法2的重点在于使用$nextTick去更新dom
更多推荐
已为社区贡献16条内容
所有评论(0)