详解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

自带的提示

第四步：

设置错误提示

使用自定义函数控制流程