elementui el-dialog的一个小坑

最新推荐文章于 2024-07-23 10:29:33 发布
最新推荐文章于 2024-07-23 10:29:33 发布
阅读量9.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lj872224/article/details/88532339
版权
在ElementUI的Dialog弹出框中，当表单内只有一个el-input时，按下回车键会刷新整个父页面。为了解决这个问题，可以在el-form内部添加一个隐藏的input元素，其value为空，这样可以阻止因回车事件引发的父页面刷新。
摘要由CSDN通过智能技术生成

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

最低0.47元/天 解锁文章
溪枫小白
关注
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1662
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
关于Element的dialog弹框失效的问题
L_s_h_123456的博客
05-22 4090
关于Element的dialog弹框失效的问题 <template> <!-- Form --> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <el-form :model="form"> &l
elementui el-dialog 的二次封装
最新发布
h1606641309的博客
07-23 742
在main.js 文件中引入我们的二次疯转组件 如下。
父组件中使用element组件的dialog 点击无响应或者再次点击无效问题
KTomorrow的博客
06-14 6298
抽离组件后 如果我们要根据更改子组件的值，那么我们就要使用ref 关联子组件 这样我们才可以更改其值 <template> <div id="App"> <el-button @click="showUpload">上传文件</el-button> <!-- <el-button type="text" @click="showUpload">点击打开 Dialog</el-button> --&g.
4种方案教你彻底解决vue + el-dialog的model的状态已经改变但是却不显示弹窗,×号点击后异常无法显示弹框
tangdou369098655的博客
02-22 2418
如果你是VUE2.X，请检查你是否在:visible这个属性上加.sync，就像这样:visible.sync=“dialogVisble”，vue3应该是v-model的绑定方式，请去查文档~如果方案1没有解决，可以尝试将x号绑定和取消一样的方法来进行关闭。找到元素，手动在dom里面把mask的display改成show。欢迎大家指出文章需要改正之处~
element-ui中el-dialog的v-model不能绑定数据的问题
Satosere的博客
10-08 1915
系列文章目录 文章目录系列文章目录前言一、element-ui中el-dialog的v-model不能绑定数据的问题1.1 `原因`1.2 `解决`总结 前言 一、element-ui中el-dialog的v-model不能绑定数据的问题 1.1 原因 应该是官方文档没有更新，或者是版本太高导致的 1.2 解决 :vsisible.sync = “flag” :visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1122
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
vue2.0的小坑——当Element UI 中的el-dialog包含子组件时，refs报undefind的问题
Leon的博客
03-05 1万+
&lt;el-dialog title="提示" :visible.sync="dialogCreate" width="30%" @open="look()" :before-close="handleClose"&gt; &lt;app-form ref="appForm" v-bind:row="row&quot
使用MultipartFile+ElementUi(el-upload)实现前端向后端传图片
weixin_44084096的博客
04-15 8176
前端（vue+element-ui）向后端（springMvc）传图片问题解决
vue实现遮罩层的简单使用（配合Element-ui dialog ）及小坑
weixin_47686269的博客
10-09 1518
vue实现遮罩层的简单使用（配合Element-ui dialog ） 实现效果展示 <template> <div> <el-button type="text" @click="dialogVisible = true" >点击打开 Dialog</el-button > <el-dialog :visible.sync="dialogVisible" width="80%"> <d
vue 打开dialog v-model 失效
qq_31683775的博客
07-20 928
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
Li_Ning21的博客
04-27 978
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible。
el-dialog的v-model的状态已经改变但是却不显示弹窗
weixin_45779102的博客
08-20 2619
1、如果有遮罩层出现但是弹窗被遮挡，根据element的文档： “正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。” 2、如果弹窗和遮罩层都不显示，有可能是弹窗内容出现了错误，可以试着把里面的内容逐个注释试验一下。 ...
vue3使用Element-Plus框架Dialog v-model绑定问题解答
weixin_46426412的博客
03-04 3321
vue3使用 Element-Plus框架，Dialog 绑定弹出层展示隐藏，问题解决
el-select点击选择时v-model绑定的值已经改变，但是前端界面显示不会响应改变。解决方法
changyana的博客
11-10 2198
如图，我已经绑定了v-model，当我点击选择时，输出绑定的值已经改变了。但是前端的输入框里显示的还是之前的值。
v-model绑定对象检测不到属性变化？
v-model绑定对象检测不到属性变化？
07-02 8365
v-model绑定 v-model大家都知道绑定的是数据源，可以把数据的变化更新到页面上，但是昨天我却遇到了这个问题。看代码 <!-- html代码 --> <el-col :span="12"> <el-form-item :label="$t('accountSubjectInfo.countriesRegions')"> <el-s...
el-dialog弹框点击顶部空白，遮罩层消失，弹框不消失
糖豆叭叭博客
11-12 1712
今天遇到一个特别奇怪的问题，点击顶部空白遮罩层消失，弹框不消失。但是点击底部空白是正常的。 经过排查问题在于在el-dialog上加了margin-top的原因，如果修改为padding-top便正常了，比较奇怪，记录一下。 el-dialog 有top属性，可以设置距离顶部的高度，这个是没有问题的。如果没有全局样式，建议使用这个。 ...
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
热门推荐
tangdou369098655的博客
05-14 1万+
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。 我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景： 父组件引用子组件 <child-dialog :visible="visible"><
elementui el-dialog 显示
06-09
要使用 ElementUI 中的 Dialog 组件显示弹窗，可以按照以下步骤操作： 1. 在 Vue 组件中引入 Dialog 组件： ``` import { Dialog } from 'element-ui'; ``` 2. 在模板中使用 Dialog 组件： ``` <template> <div> <el-button @click="showDialog">显示弹窗</el-button> <el-dialog :visible.sync="dialogVisible"> <span>这是弹窗的内容</span> </el-dialog> </div> </template> ``` 3. 在组件的 data 中定义 dialogVisible 变量，并在 showDialog 方法中将其设为 true： ``` export default { data() { return { dialogVisible: false, }; }, methods: { showDialog() { this.dialogVisible = true; }, }, }; ``` 这样就可以在点击按钮时显示弹窗了。需要注意的是，Dialog 组件的 visible 属性需要使用 .sync 修饰符，这样才能保证弹窗的显示状态与组件的 data 中的变量同步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值