详解element-ui设置下拉选择切换必填和非必填

红太狼 2022-09-04 13:58 771阅读 0赞

**➢ 需求**

默认都是必选

下拉选择的时候

选择必填，活动名称为必填，需要校验和显示`*`

选择非必填，活动名称不做校验，隐藏`*`

![71e51b563c0ea3a31c064bc732554fe4.gif][]

**➢ 初始校验规则**

经测试，网上其他的方式都没有实现需求，动态切换`rules`中的`required`没有作用

因为按照以下的写法的话，`element-ui`在组件初始化后校验规则就定型了，切换也没用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>rules: { </code> <code>&nbsp;&nbsp;</code><code>name: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ required: </code><code>true</code><code>, message: </code><code>"请输入名称"</code><code>, trigger: </code><code>"blur"</code> <code>}</code> <code>&nbsp;&nbsp;</code><code>],</code> <code>&nbsp;&nbsp;</code><code>region: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ required: </code><code>true</code><code>, message: </code><code>"请选择类型"</code><code>, trigger: </code><code>"blur"</code> <code>}</code> <code>&nbsp;&nbsp;</code><code>]</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**➢ 解决方案**

第一步：

去除`rules`中需要动态校验的字段规则

去除`name`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>rules: { </code> <code>&nbsp;&nbsp;</code><code>region: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ required: </code><code>true</code><code>, message: </code><code>"请选择类型"</code><code>, trigger: </code><code>"blur"</code> <code>}</code> <code>&nbsp;&nbsp;</code><code>]</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

第二步：

在字段为`name`的`form-item`上，添加`required`属性

下面代码`isHaveTo`为新字段，根据下拉框选择的值来决定是为`true`还是`false`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;el-form-item label=</code><code>"活动名称"</code> <code>prop=</code><code>"name"</code> <code>:required=</code><code>"isHaveTo"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;el-input v-model=</code><code>"ruleForm.name"</code><code>&gt;&lt;/el-input&gt;</code> <code>&lt;/el-form-item&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

第三步：

计算属性，新增字段`isHaveTo`

下拉选择框非必须是为`1`，其他都是必填，包括默认

效果如图：

下拉切换，`*`号显隐，提交时也有不同规则

注意，新的问题来了

在选择必填时，没有了之前的错误提示文字，而是`element`自带的提示

![f82d0c1d5f9db2843694cd5517bd6acf.gif][]

第四步：

设置错误提示

使用自定义函数控制流程

把`name`字段重新加回去`rules`

注意是函数`{ validator: validateName }`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>rules: { </code> <code>&nbsp;&nbsp;</code><code>name: [{ validator: validateName }],</code> <code>&nbsp;&nbsp;</code><code>region: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ required: </code><code>true</code><code>, message: </code><code>"请选择类型"</code><code>, trigger: </code><code>"blur"</code> <code>}</code> <code>&nbsp;&nbsp;</code><code>]</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

然后设置函数`validateName`

可以看到，必填时按照我们设置的提示语提示，非必填时，校验通过

![b1cde66bed96cf78f7bbad19578f7965.png][]

贴上代码

**➢ 完整demo代码**

`demo`使用`vue-cli`，引入`element-ui`

`核心代码参考如下：`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 </td> 
 <td> <code>&lt;template&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-form</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>:model=</code><code>"ruleForm"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>:rules=</code><code>"rules"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ref=</code><code>"ruleForm"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>label-width=</code><code>"100px"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>class=</code><code>"demo-ruleForm"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-form-item label=</code><code>"活动名称"</code> <code>prop=</code><code>"name"</code> <code>:required=</code><code>"isHaveTo"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-input v-model=</code><code>"ruleForm.name"</code><code>&gt;&lt;/el-input&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/el-form-item&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-form-item label=</code><code>"活动区域"</code> <code>prop=</code><code>"region"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-select v-model=</code><code>"ruleForm.region"</code> <code>placeholder=</code><code>"请选择活动区域"</code> <code>style=</code><code>"width:100%"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-option label=</code><code>"必填"</code> <code>value=</code><code>"0"</code><code>&gt;&lt;/el-option&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-option label=</code><code>"非必填"</code> <code>value=</code><code>"1"</code><code>&gt;&lt;/el-option&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/el-select&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/el-form-item&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-form-item&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;el-button type=</code><code>"primary"</code> <code>@click=</code><code>"submitForm('ruleForm')"</code><code>&gt;立即创建&lt;/el-button&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/el-form-item&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/el-form&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/template&gt;</code> <code>&lt;script&gt;</code> <code>export </code><code>default</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>"HelloWorld"</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 验证活动名称的函数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let validateName = (rule, value, callback) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 当活动名称为空值且为必填时，抛出错误，反之通过校验</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>this</code><code>.ruleForm.name === </code><code>""</code> <code>&amp;&amp; </code><code>this</code><code>.isHaveTo) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback(</code><code>new</code> <code>Error(</code><code>"请输入活动名称"</code><code>));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ruleForm: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>""</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>region: </code><code>""</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rules: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: [{ validator: validateName }],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>region: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ required: </code><code>true</code><code>, message: </code><code>"请选择类型"</code><code>, trigger: </code><code>"blur"</code> <code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>computed: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>isHaveTo: </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.ruleForm.region !== `1`;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>methods: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>submitForm(formName) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.$refs[formName].validate(valid =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(valid) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`已提交表单`);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"error submit!!"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>false</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>};</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

[71e51b563c0ea3a31c064bc732554fe4.gif]: /images/20220829/655dee02397e40959a68608d49daedb7.png
[f82d0c1d5f9db2843694cd5517bd6acf.gif]: /images/20220829/c02bced6cb9d47ec89c37f4d728d5eee.png
[b1cde66bed96cf78f7bbad19578f7965.png]: /images/20220829/0d7174dedced42d99ee4cdc05a297dc1.png