Vue ElementUi動態輸入框(一行多列)表單(商品屬性數量折扣等) 的校驗


 題記:首先element文檔給的required案列是單列輸入框,使用場景不符合動態一行多列驗證。找了很多資料才解決,使用場景如下圖:商品的數量這一行全部必填,而且里面也有自己的填寫規則。可增可減。

如果場景類似你就可以使用我這種方法親測完美符合場景,測試小姐姐也沒意見的那種哦。下面介紹使用方法代碼奉上如下:

 

首先跟正常的官方文檔單個輸入框一致,區別點就在於2,3,4 那個數組

 discountArr:[
        {
          start:"",
          end:"",
          disCount:""
        }
      ],就是我在自己定義的完整一行所需要的,剩下的就是循環就好。

源代碼如下

 <el-form-item
        label="商品數量:"
        size="mini"
        :rules="{ required: true, message: '促銷活動類型不能為空', trigger: 'blur'}"
        v-for="(item,index) in addForm.discountArr" :key="index"
       
      >
        <el-col :span="24" >
          <el-col :span="3">
            <el-form-item   :prop="'discountArr.' + index + '.start'"
        :rules="discountArrRules.discountArrStart"> <el-input v-model="item.start" size="mini"></el-input></el-form-item>
           
          </el-col>
          <el-col :span="1" style="color:black;text-align:center;">——</el-col>
          <el-col :span="3">
             <el-form-item   :prop="'discountArr.' + index + '.end'"
        :rules="discountArrRules.discountArrEnd"> <el-input v-model="item.end" size="mini"></el-input></el-form-item>
           
          </el-col>
          <el-col :span="1" style="color:black;text-align:center;">件</el-col>
          <el-col :span="2" style="color:black;text-align:center;">折扣:</el-col>
          <el-col :span="2">
             <el-form-item   :prop="'discountArr.' + index + '.disCount'"
        :rules="discountArrRules.discountArrDisCount"> <el-input v-model="item.disCount" size="mini"></el-input></el-form-item>
         
        </el-col>
        <el-col :span="2" style="color:black;text-align:center">% off</el-col>
        <el-col :span="1"><el-button @click='deleteTime(index)'>
                  <i class="el-icon-minus"></i>
                </el-button></el-col>
        </el-col>
      </el-form-item>
      <el-form-item><el-col :span="24" size="mini"> <el-button @click="add()"   size="mini">添加一列</el-button></el-col></el-form-item>

到這里已經差不多就算完了,接下來就是加上提示語就行了如下圖

到此完美收工解決!!!基本上就這最后兩張圖的步驟!!!!第一張是效果圖!!!第一張是效果圖!!!第一張是效果圖!!!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM