el-form中的rules未生效的解决方法

 更新时间:2023年02月02日 09:48:41   作者:宝贝QY  
本文主要介绍了el-form中的rules未生效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

我们在使用elementUI库的时候,肯定要了解相关的api,但使用过程中明明和官方写法类似为什么自己的就是没有生效,在这里给大家讲解一下我在工作中碰到的一个小问题。

先给大家用图片和代码的形式展示遇到的问题及解决方案:

<el-dialog :visible.sync="dialogVisible" :show-close="false" :title="isEdit?'修改支付商品':'新增支付商品'" width="600px" top="8vh">
  <el-form ref="ruleForm" :rules="rules" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
    <el-form-item class="payment_item" label="产品名称:" prop="paymentProductName">
      <el-input v-model="ruleForm.paymentProductName" size="mini" style="width:350px" placeholder="请输入产品名称"/>
    </el-form-item>
    <el-form-item class="payment_item" label="产品类型:" prop="paymentProductType">
      <el-select v-model="ruleForm.paymentProductType" size="mini" placeholder="请选择" style="width:350px">
        <el-option label="小程序开通" value="1"/>
        <el-option label="核验币" value="0"/>
      </el-select>
    </el-form-item>
    <el-form-item class="payment_item" label="产品描述:">
      <el-input
        :rows="2"
        v-model="ruleForm.remark"
        style="width:350px"
        type="textarea"
        placeholder="请输入内容"/>
    </el-form-item>
    <el-form-item class="payment_item" label="价格:" prop="paymentProductPrice">
      <el-input-number
        :precision="2"
        :controls="false"
        v-model="ruleForm.paymentProductPrice"
        :min="0.01"
        size="mini"
        style="width:350px"/>
    </el-form-item>
    <el-form-item class="payment_item" label="数量:" prop="paymentProductNum">
      <el-input-number
        :precision="0"
        :controls="false"
        v-model="ruleForm.paymentProductNum"
        :min="1"
        size="mini"
        style="width:350px"/>
    </el-form-item>
    <el-form-item class="payment_item" label="优惠:" prop="paymentProductGiveNum">
      <el-input-number
        :precision="0"
        :controls="false"
        v-model="ruleForm.paymentProductGiveNum"
        size="mini"
        style="width:350px"/>
    </el-form-item>
    <el-form-item class="payment_item" label="首充:" prop="isFirstPunch">
      <el-radio v-model="ruleForm.isFirstPunch" :label="true">是</el-radio>
      <el-radio v-model="ruleForm.isFirstPunch" :label="false">否</el-radio>
    </el-form-item>
    <el-form-item v-if="ruleForm.isFirstPunch" class="payment_item" label="首充描述标题:" prop="firstPunchTitle">
      <el-input v-model="ruleForm.firstPunchTitle" size="mini" style="width:350px" placeholder="请输入首充描述标题" maxlength="15"/>
    </el-form-item>
    <el-form-item v-if="ruleForm.isFirstPunch" class="payment_item" label="副标题:" prop="firstPunchSubTitle">
      <el-input v-model="ruleForm.firstPunchSubTitle" size="mini" style="width:350px" placeholder="请输入副标题" maxlength="30"/>
    </el-form-item>
    <el-form-item class="payment_item" label="配置渠道:" prop="rechargeChannel">
      <el-select v-model="ruleForm.rechargeChannel" size="mini" placeholder="请选择" style="width:350px">
        <el-option label="非IOS" value="0"/>
        <el-option label="IOS" value="1"/>
      </el-select>
    </el-form-item>
    <el-form-item class="payment_item" label="排序权重:" prop="sort">
      <el-input-number :precision="0" :controls="false" v-model="ruleForm.sort" size="mini" style="width:350px"/>
    </el-form-item>
  </el-form>
  <div slot="footer" style="text-align: center">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button
      type="primary"
      @click="submitHandler('ruleForm')">确 定
    </el-button>
  </div>
</el-dialog>
data() {
    return {
      rules: {
        paymentProductName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        paymentProductType: [
          { required: true, message: '请选择产品类型', trigger: 'change' }
        ],
        paymentProductPrice: [
          { required: true, message: '请输入产品价格', trigger: 'blur' }
        ],
        paymentProductNum: [
          { required: true, message: '请输入产品数量' },
          { type: 'number', message: '产品数量必须为数字' }
        ],
        paymentProductGiveNum: [
          { required: true },
          { type: 'number' }
        ],
        isFirstPunch: [
          { required: true, message: '请选择是否是首充', trigger: 'change' }
        ],
        firstPunchTitle: [
          { required: true, message: '请输入首充描述标题', trigger: 'blur' }
        ],
        firstPunchSubTitle: [
          { required: true, message: '请输入副标题', trigger: 'blur' }
        ],
        rechargeChannel: [
          { required: true, message: '请选择配置渠道', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序权重' },
          { type: 'number', message: '排序权重必须为数字' }
        ]
      }
    }
  },

特别提醒,<el-form-item>中prop=“paymentProductName”的值一定要跟对应的v-model=“ruleForm.paymentProductName”一致,即两个“paymentProductName”得一样,否则会导致rules失效

碰到类似问题的同学相信看了上面的图片和代码应该有一种醍醐灌顶的感觉,工作中碰到的坑,小记一下。 

到此这篇关于el-form中的rules未生效的解决方法的文章就介绍到这了,更多相关el-form rules未生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js使用axios动态获取response里的data数据操作

    Vue.js使用axios动态获取response里的data数据操作

    这篇文章主要介绍了Vue.js使用axios动态获取response里的data数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解vue-cli开发环境跨域问题解决方案

    详解vue-cli开发环境跨域问题解决方案

    本篇文章主要介绍了vue-cli开发环境跨域问题解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • vue+elementUI用户修改密码的前端验证规则

    vue+elementUI用户修改密码的前端验证规则

    用户登录后修改密码,密码需要一定的验证规则,这篇文章主要介绍了vue+elementUI用户修改密码的前端验证,需要的朋友可以参考下
    2024-03-03
  • vue2 element 实现表格点击详情返回时保留查询参数的示例代码

    vue2 element 实现表格点击详情返回时保留查询参数的示例代码

    这篇文章主要介绍了vue2 element 实现表格点击详情返回时保留查询参数的示例代码,本文通过图文示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue跨域请求问题解决方案过程解析

    Vue跨域请求问题解决方案过程解析

    这篇文章主要介绍了Vue跨域请求问题解决方案过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue实现h5扫码的代码示例

    vue实现h5扫码的代码示例

    html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件,允许用户使用摄像头扫描二维码,并且解析为文本或者url,本文给大家介绍了vue实现h5扫码,需要的朋友可以参考下
    2024-01-01
  • vue实现放大缩小拖拽功能

    vue实现放大缩小拖拽功能

    这篇文章主要为大家详细介绍了vue实现放大缩小拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue+ts大文件切片上传的实现示例

    vue+ts大文件切片上传的实现示例

    在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求,本文主要介绍了vue+ts大文件切片上传,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue中下载文件的方法示例详解

    vue中下载文件的方法示例详解

    这篇文章主要介绍了vue中下载文件的方法,通过实例代码讲解了下载后端返回文件和下载本地文件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码)

    使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码)

    这篇文章主要介绍了使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02

最新评论