【Android楚君】vue表单form

<div class="addShopTemp">
          <el-form :inline="true" :rules="shopRules" ref="addShopFormRef" :model="addShopData" status-icon class="shopForm">
            <el-form-item label="商品名称" prop="shopName">
              <el-input v-model="addShopData.shopName" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品单价" prop="shopPrice">
              <el-input v-model.number="addShopData.shopPrice" placeholder="请输入商品单价" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="shopCount">
              <el-input v-model.number="addShopData.shopCount" placeholder="请输入商品数量" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShop">添加商品</el-button>
        </div>

addShop(addShopData){//添加商品
      this.$refs.addShopFormRef.validate(valid => {
        if(valid){
          ......
        }
      })
    },

addShop(addShopData){//添加商品

     this.$refs.addShopFormRef.validate(valid => {

       if(valid){

         ......

       }

     })

   },

<div class="addShopTemp">

         <el-form :inline="true" :rules="shopRules" ref="addShopFormRef" :model="addShopData" status-icon class="shopForm">

           <el-form-item label="商品名称" prop="shopName">

             <el-input v-model="addShopData.shopName" placeholder="请输入商品名称" clearable></el-input>

           </el-form-item>

           <el-form-item label="商品单价" prop="shopPrice">

             <el-input v-model.number="addShopData.shopPrice" placeholder="请输入商品单价" clearable></el-input>

           </el-form-item>

           <el-form-item label="商品数量" prop="shopCount">

             <el-input v-model.number="addShopData.shopCount" placeholder="请输入商品数量" clearable></el-input>

           </el-form-item>

         </el-form>

         <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShop">添加商品</el-button>

       </div>