vue el-dialog嵌套解决无法点击问题

产生原因:

当你在 el-dialog 上嵌套另一个 el-dialog 窗口时,可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层(overlay)或其他样式问题造成的。

解决方案:

如果你的 el-dialog 组件支持 append-to-body 属性,你可以将对话框附加到 body 元素上,以避免 z-index 问题。

复制代码
<template>
  <el-dialog :visible.sync="isVisible" :before-close="handleClose" append-to-body>
    <p>外层对话框</p>
    <el-dialog :visible.sync="innerVisible" :before-close="handleInnerClose" append-to-body>
      <p>内层对话框</p>
    </el-dialog>
  </el-dialog>
</template>
相关推荐
仰望.8 分钟前
vue 甘特图 vxe-gantt 如何实现标记删除数据,显示标记删除后行效果,获取已标记的行数据
vue.js·甘特图·vxe-ui
小二·33 分钟前
【万字源码级剖析】深入理解 Vue 3 响应式系统:ref、reactive、computed 与 effect 的底层实现
前端·javascript·vue.js
vx_bisheyuange2 小时前
基于SpringBoot的青年公寓服务平台
前端·vue.js·spring boot·毕业设计
奶糖 肥晨2 小时前
JS自动检测用户国家并显示电话前缀教程|vue uniapp react可用
javascript·vue.js·uni-app
文艺理科生3 小时前
Google A2UI 解读:当 AI 不再只是陪聊,而是开始画界面
前端·vue.js·人工智能
json{shen:"jing"}3 小时前
08_组件基础
前端·javascript·vue.js
aka_tombcato4 小时前
【开源自荐】 AI Selector:一款通用 AI 配置组件,让你的应用快速接入 20+ LLM AI厂商
前端·vue.js·人工智能·react.js·开源·ai编程
hxjhnct5 小时前
React 为什么不采用(VUE)绑定数据?
javascript·vue.js·react.js
Knight_AL5 小时前
Vue + Spring Boot 项目添加 /wvp 前缀的完整链路解析(从浏览器到静态资源)
前端·vue.js·spring boot
技术钱5 小时前
vue3 + element plus实现表头拖拽数组进行汇总
前端·javascript·vue.js