欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年02月02日 09:48:41   作者：寶貝QY  
本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們?cè)谑褂胑lementUI庫(kù)的時(shí)候，肯定要了解相關(guān)的api，但使用過(guò)程中明明和官方寫法類似為什么自己的就是沒(méi)有生效，在這里給大家講解一下我在工作中碰到的一個(gè)小問(wèn)題。

先給大家用圖片和代碼的形式展示遇到的問(wèn)題及解決方案：

<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="產(chǎn)品名稱：" prop="paymentProductName">
      <el-input v-model="ruleForm.paymentProductName" size="mini" style="width:350px" placeholder="請(qǐng)輸入產(chǎn)品名稱"/>
    </el-form-item>
    <el-form-item class="payment_item" label="產(chǎn)品類型：" prop="paymentProductType">
      <el-select v-model="ruleForm.paymentProductType" size="mini" placeholder="請(qǐng)選擇" style="width:350px">
        <el-option label="小程序開通" value="1"/>
        <el-option label="核驗(yàn)幣" value="0"/>
      </el-select>
    </el-form-item>
    <el-form-item class="payment_item" label="產(chǎn)品描述：">
      <el-input
        :rows="2"
        v-model="ruleForm.remark"
        style="width:350px"
        type="textarea"
        placeholder="請(qǐng)輸入內(nèi)容"/>
    </el-form-item>
    <el-form-item class="payment_item" label="價(jià)格：" 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="數(shù)量：" 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="優(yōu)惠：" 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="首充描述標(biāo)題：" prop="firstPunchTitle">
      <el-input v-model="ruleForm.firstPunchTitle" size="mini" style="width:350px" placeholder="請(qǐng)輸入首充描述標(biāo)題" maxlength="15"/>
    </el-form-item>
    <el-form-item v-if="ruleForm.isFirstPunch" class="payment_item" label="副標(biāo)題：" prop="firstPunchSubTitle">
      <el-input v-model="ruleForm.firstPunchSubTitle" size="mini" style="width:350px" placeholder="請(qǐng)輸入副標(biāo)題" maxlength="30"/>
    </el-form-item>
    <el-form-item class="payment_item" label="配置渠道：" prop="rechargeChannel">
      <el-select v-model="ruleForm.rechargeChannel" size="mini" placeholder="請(qǐng)選擇" 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="排序權(quán)重：" 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: '請(qǐng)輸入產(chǎn)品名稱', trigger: 'blur' }
        ],
        paymentProductType: [
          { required: true, message: '請(qǐng)選擇產(chǎn)品類型', trigger: 'change' }
        ],
        paymentProductPrice: [
          { required: true, message: '請(qǐng)輸入產(chǎn)品價(jià)格', trigger: 'blur' }
        ],
        paymentProductNum: [
          { required: true, message: '請(qǐng)輸入產(chǎn)品數(shù)量' },
          { type: 'number', message: '產(chǎn)品數(shù)量必須為數(shù)字' }
        ],
        paymentProductGiveNum: [
          { required: true },
          { type: 'number' }
        ],
        isFirstPunch: [
          { required: true, message: '請(qǐng)選擇是否是首充', trigger: 'change' }
        ],
        firstPunchTitle: [
          { required: true, message: '請(qǐng)輸入首充描述標(biāo)題', trigger: 'blur' }
        ],
        firstPunchSubTitle: [
          { required: true, message: '請(qǐng)輸入副標(biāo)題', trigger: 'blur' }
        ],
        rechargeChannel: [
          { required: true, message: '請(qǐng)選擇配置渠道', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '請(qǐng)輸入排序權(quán)重' },
          { type: 'number', message: '排序權(quán)重必須為數(shù)字' }
        ]
      }
    }
  },

特別提醒，<el-form-item>中prop=“paymentProductName”的值一定要跟對(duì)應(yīng)的v-model=“ruleForm.paymentProductName”一致，即兩個(gè)“paymentProductName”得一樣，否則會(huì)導(dǎo)致rules失效

碰到類似問(wèn)題的同學(xué)相信看了上面的圖片和代碼應(yīng)該有一種醍醐灌頂?shù)母杏X，工作中碰到的坑，小記一下。 

到此這篇關(guān)于el-form中的rules未生效的解決方法的文章就介紹到這了,更多相關(guān)el-form rules未生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論