这篇文章主要介绍了详解element-ui设置下拉选择切换必填和非必填，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
➢ 需求
默认都是必选
下拉选择的时候
选择必填，活动名称为必填，需要校验和显示*
选择非必填，活动名称不做校验，隐藏*
➢ 初始校验规则
经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用
因为按照以下的写法的话，element-ui在组件初始化后校验规则就定型了，切换也没用
rules: { name: [ { required: true, message: "请输入名称", trigger: "blur" } ], region: [ { required: true, message: "请选择类型", trigger: "blur" } ] }
➢ 解决方案
第一步：
去除rules中需要动态校验的字段规则
去除name
rules: { region: [ { re<em style="color:transparent">本文来源gao.dai.ma.com搞@代*码#网</em>quired: true, message: "请选择类型", trigger: "blur" } ] }
第二步：
在字段为name的form-item上，添加required属性
下面代码isHaveTo为新字段，根据下拉框选择的值来决定是为true还是false
第三步：
计算属性，新增字段isHaveTo
下拉选择框非必须是为1，其他都是必填，包括默认
效果如图：
下拉切换，*号显隐，提交时也有不同规则
注意，新的问题来了
在选择必填时，没有了之前的错误提示文字，而是element自带的提示
第四步：
设置错误提示
使用自定义函数控制流程
把name字段重新加回去rules
注意是函数{ validator: validateName }
rules: { name: [{ validator: validateName }], region: [ { required: true, message: "请选择类型", trigger: "blur" } ] }
然后设置函数validateName
可以看到，必填时按照我们设置的提示语提示，非必填时，校验通过
贴上代码
data() { // 验证活动名称的函数 let validateName = (rule, value, callback) => { // 当活动名称为空值且为必填时，抛出错误，反之通过校验 if (this.ruleForm.name === "" && this.isHaveTo) { callback(new Error("请输入活动名称")); } else { callback(); } }; return { ruleForm: { name: "", region: "" }, rules: { name: [{ validator: validateName }], region: [ { required: true, message: "请选择类型", trigger: "blur" } ] } }; },
➢ 完整demo代码
demo使用vue-cli，引入element-ui
核心代码参考如下：
<div> 立即创建</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是详解element-ui设置下拉选择切换必填和非必填的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解element-ui设置下拉选择切换必填和非必填
转载请注明原文链接：详解element-ui设置下拉选择切换必填和非必填
