element ui组件 下拉框无法进行表单验证

element ui 专栏收录该内容
8 篇文章 0 订阅

一、举例组件代码

 <el-form  :model="dataForm" :rules="dataRule" ref="dataForm"
  @keyup.enter.native="dataFormSubmit()" label-width="80px" >
   <el-form-item label="餐品名称" prop="mealId" >
        <el-select style="width: 100%" v-model="dataForm.mealId"  placeholder="请选择" id="mealClick" @click="getAllCatering">
          <el-option
            v-for="meal in meals"
            :key="meal.mealId"
            :label="meal.mealName"
            :value="meal.mealId">
          </el-option>
        </el-select>
      </el-form-item>
 </el-form>
 
 export default {
  data() {
      return {
       	dataRule: {
           mealId: [
                {required: true, message: '餐品名称不能为空', trigger: 'blur'}
            ]
         }
       }
   },
 }

二、下拉框无法进行表单验证原因一

  • prop属性的值与v-model属性中的值和dataRule:{}中的元素名都要保持一致, lz举例组件代码没有问题,正常情况都会验证成功。在这里插入图片描述在这里插入图片描述

三、下拉框无法进行表单验证原因二

  • 注:(该原因是导致lz无法进行表单验证的真正原因)

  • 再点击提交按钮时,需要在请求后端方法前加入下图中画红色框部分的代码,即可正常进行下拉框表单验证,如下图:
    在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值