element ui表单必填_详解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

第三步：

计算