ElementUI 对话框el-dialog嵌套问题

最新推荐文章于 2024-10-12 08:36:56 发布

Make-1t-0r-d1e

最新推荐文章于 2024-10-12 08:36:56 发布

阅读量4.7k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_44700621/article/details/123371350

版权

ElementUI 官网对el-dialog内嵌问题提供的样例程序如下：

<el-dialog v-model="outerVisible" title="Outer Dialog">
  <template #default>
    <el-dialog
      v-model="innerVisible"
      width="30%"
      title="Inner Dialog"
      append-to-body
    >
    </el-dialog>
  </template>
</el-dialog>

经过本地测试运行后主要存在两个问题

el-dialog父组件无法正常显示
去掉<template></template>标签，并将v-model属性修改为:visible，父组件正常显示

<el-dialog v-model="outerVisible" title="Outer Dialog">
	<!--修改v-model为:visible并去除<template>标签-->
    <el-dialog
      :visible="innerVisible" 
      width="30%"
      title="Inner Dialog"
      append-to-body
    >
    </el-dialog>
</el-dialog>

el-dialog子组件无法正常关闭
增加:before-close属性，在点击关闭按钮时同时将子组件置为不可见

<el-dialog v-model="outerVisible" title="Outer Dialog">
	<!--修改v-model为:visible并去除<template>标签-->
    <el-dialog
      :visible="innerVisible" 
      width="30%"
      title="Inner Dialog"
      append-to-body
      :before-close="handleClose"
    >
    </el-dialog>
</el-dialog>
.......
handleClose(){
	this.innerVisible=false;
}