el-dialog点击外部不关闭
时间: 2023-07-22 20:28:36 浏览: 259
要实现 el-dialog 点击外部不关闭的功能,可以在 el-dialog 标签中添加 `:close-on-click-modal="false"` 属性。这样就可以防止用户点击遮罩层或者外部区域导致 el-dialog 自动关闭。同时,你也可以通过设置 `:lock-scroll="false"` 属性来防止页面滚动。例如:
```
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :lock-scroll="false">
<!-- 对话框内容 -->
</el-dialog>
```
希望能对你有所帮助!
相关问题
表格数据并不在el-dialog,是外部的表格,是el-table嵌套了el-button点击触发el-dialog后再次关闭el-dialog时,el-table的值会清空消失
如果el-table的值在el-dialog中关闭后被清空,可能是因为el-dialog的关闭操作导致了数据的重置。为了解决这个问题,您可以尝试以下方法:
1. 确保el-dialog组件的关闭事件不会重置数据:在关闭el-dialog之前,确保不要重置el-table的数据。您可以使用v-model指令或者自定义的变量来控制el-dialog的显示与隐藏,而不是直接操作el-dialog的关闭事件。这样,即使关闭el-dialog,el-table的数据也会保留。
2. 在关闭el-dialog时手动保存表格数据:在关闭el-dialog时,将表格数据保存到一个变量中,或者使用Vue.js的数据持久化方法(如localStorage)将数据保存到本地。当再次打开el-dialog时,将保存的数据重新赋值给el-table,这样就能保留表格数据。
3. 使用Vue组件的生命周期钩子函数:在Vue组件的beforeDestroy或者destroyed生命周期钩子函数中保存表格数据。当el-dialog被关闭时,这些钩子函数会被触发,您可以在其中将表格数据保存到一个变量中,以便下次使用时重新赋值给el-table。
通过上述方法,您应该能够解决el-dialog关闭后el-table数据被清空的问题。请根据您的具体情况选择适合您的解决方案。
el-dialog点击外面不关闭
el-dialog点击外面不关闭可以通过两种方法来实现。
方法一:在el-dialog组件中设置close-on-click-modal属性为false。例如:
```html
<el-dialog :close-on-click-modal="false" title="业务" top="25vh" width="320px" class="business-review-dialog">
</el-dialog>
```
这样设置后,点击modal区域外部不会关闭dialog。
方法二:在main.js中全局设置点击空白处不能关闭弹窗。首先确保在main.js中引入了element-ui,并且使用Vue.use(ElementUI)来注册element-ui组件。然后可以通过修改默认配置来实现。例如:
```javascript
import ElementUI from 'element-ui'
// 全局修改默认配置,点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false
Vue.use(ElementUI)
```
这样设置后,所有的el-dialog组件都会默认点击空白处不关闭。
以上是两种实现el-dialog点击外面不关闭的方法。你可以根据自己的需求选择其中一种来使用。
#### 引用[.reference_title]
- *1* *2* [el-dialog点击空白不允许关闭,只能点击关闭和取消按钮才消失](https://blog.csdn.net/weixin_69811594/article/details/129624829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-dialog中点击之外的区域不关闭弹窗](https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123850677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文