elementUI el-select 不支持bulr表单验证 解决方法

Vue 同时被 2 个专栏收录
21 篇文章 1 订阅
2 篇文章 0 订阅

思路: 自定义组件事件 bulr, 手动触发表单验证

  1. el-select 组件中定义 bulr 事件 @blur.native.capture='onclick'
  2. 定义表单 rules 规则
  3. 手动触发对应表单规则校验 this.$refs[formName].validateField(type) formName:表单名称 type:表单属性
// html
// 页面中我定义了多个表单,所以传入了表单 ref 名称。单个表单可以只传属性值
<el-select 
  @blur.native.capture="e => searchKeyBlur(e, 'refForm','selectKey')" 
  style="width: 320px;" 
  v-model="praRuleForm.selectKey" 
  filterable placeholder="请选择亲属关系">
  <el-option
    v-for="item in relationList"
    :key="item.dictDataCode"
    :label="item.dictDataName"
    :value="item.dictDataCode">
  </el-option>
</el-select>
// js
searchKeyBlur(e, formName, type) {
  this.$refs[formName].validateField(type) 
  // 代表触发 formName 表单所对应 type 属性的规则 
},
  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值