elementui el-dialog的一个小坑

在ElementUI的Dialog弹出框中,当表单内只有一个el-input时,按下回车键会刷新整个父页面。为了解决这个问题,可以在el-form内部添加一个隐藏的input元素,其value为空,这样可以阻止因回车事件引发的父页面刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值