elementui el-dialog的一個小坑

<el-dialog title="編輯庫存" :visible.sync="dialogFormVisible">
                      <div style="border-bottom:1px solid #E6E6E6;width:100%;margin-top:-20px;"></div>
                      <el-form :model="dialogform" ref="dialogform" :rules="rules" @submit.native.prevent>
                           <el-row style="margin-top:20px;margin-left:20px;">
                               <el-col :span="24">
                                   <el-form-item label="商品庫存" prop="stock"  >
                                      <el-input v-model="dialogform.stock" @keyup.enter.native="submitForm('dialogform')" class="custom-input" size="mini" ></el-input>
                                 </el-form-item>
                               </el-col>
                               
                           </el-row>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button  class="btn-save" @click="updateSkuStock('dialogform')" size="mini">確 定</el-button>
                        <el-button class="btn-back"  size="mini" @click="dialogFormVisible = false">取 消</el-button>
                      </div>
 </el-dialog>

 

elemetui dialog彈出框表單裏面有一個input框,給他綁定一個鼠標監聽回車事件,默認會去刷新整個父級頁面,因爲el-form裏面只有一個el-input的時候,就會去刷新整個父級頁面,解決辦法,在form裏面加一個 <input type="hidden" value=""/>就不會刷新父頁面了

 

 

    <el-dialog title="編輯庫存" :visible.sync="dialogFormVisible">
                      <div style="border-bottom:1px solid #E6E6E6;width:100%;margin-top:-20px;"></div>
                      <el-form :model="dialogform" ref="dialogform" :rules="rules" @submit.native.prevent>
                           <el-row style="margin-top:20px;margin-left:20px;">
                               <el-col :span="24">
                                   <input type="hidden" value=""/>
                                   <el-form-item label="商品庫存" prop="stock"  >
                                      <el-input v-model="dialogform.stock" @keyup.enter.native="submitForm('dialogform')" class="custom-input" size="mini" ></el-input>
                                 </el-form-item>
                               </el-col>
                               
                           </el-row>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button  class="btn-save" @click="updateSkuStock('dialogform')" size="mini">確 定</el-button>
                        <el-button class="btn-back"  size="mini" @click="dialogFormVisible = false">取 消</el-button>
                      </div>
                    </el-dialog>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章