详解element-ui设置下拉选择切换必填和非必填
93 浏览量
2020-12-10
03:47:05
上传
评论
收藏 78KB PDF 举报
详解详解element-ui设置下拉选择切换必填和非必填设置下拉选择切换必填和非必填
➢ 需求需求
默认都是必选
下拉选择的时候
选择必填，活动名称为必填，需要校验和显示*
选择非必填，活动名称不做校验，隐藏*
➢ 初始校验规则初始校验规则
经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用
因为按照以下的写法的话，element-ui在组件初始化后校验规则就定型了，切换也没用
rules: {
name: [
{ required: true, message: "请输入名称", trigger: "blur" }
],
region: [
{ required: true, message: "请选择类型", trigger: "blur" }
] }
➢ 解决方案解决方案
第一步：
去除rules中需要动态校验的字段规则
去除name
rules: {
region: [
{ required: true, message: "请选择类型", trigger: "blur" }
] }
第二步：
在字段为name的form-item上，添加required属性
下面代码isHaveTo为新字段，根据下拉框选择的值来决定是为true还是false
<el-form-item label="活动名称" prop="name" :required="isHaveTo">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
第三步：
计算属性，新增字段isHaveTo
下拉选择框非必须是为1，其他都是必填，包括默认
<el-form-item label="活动名称" prop="name" :required="isHaveTo">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
效果如图：
下拉切换，*号显隐，提交时也有不同规则
注意，新的问题来了
在选择必填时，没有了之前的错误提示文字，而是element自带的提示
资源评论
