el-dialog嵌套
时间: 2023-08-19 12:13:02 浏览: 52
el-dialog嵌套时,如果内层dialog上有遮罩层无法点击,可以使用官方提供的解决方案。根据官方文档,可以给内层dialog添加append-to-body属性,并将其设置为true。这样内层dialog就会插入到body元素上,确保内外层dialog和遮罩层级关系的正确。[2]具体使用方法如下所示:
```html
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
```
通过添加append-to-body属性,内层dialog就可以正常显示,并且遮罩层也可以正常点击了。这样就解决了内层dialog上遮罩层无法点击的问题。
相关问题
el-dialog嵌套el-table
el-dialog嵌套el-table的示例代码如下:
```html
<template>
<div>
<el-button @click="openDialog">打开对话框</el-button>
<el-dialog :visible.sync="dialogVisible" @close="closeDialog">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
};
},
methods: {
openDialog() {
this.dialogVisible = true;
},
closeDialog() {
this.dialogVisible = false;
}
}
};
</script>
```
在上述代码中,el-dialog作为对话框组件,el-table作为表格组件嵌套在el-dialog中。当点击"打开对话框"按钮时,对话框会显示,并展示包含姓名、年龄和性别的表格数据。当对话框关闭时,会触发@close事件,将dialogVisible属性设置为false,从而关闭对话框。
el-dialog嵌套内层
el-dialog嵌套内层时,如果内层dialog上有遮罩层无法点击的问题,可以通过在内层dialog上添加append-to-body属性来解决。官方文档中也提到了这个解决方法。将内层dialog的append-to-body属性设置为true,它就会插入到body元素上,从而保证内外层dialog和遮罩层级关系的正确。这样就可以解决内层dialog上遮罩层无法点击的问题。\[2\]具体使用示例如下:
```html
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
</el-dialog>
```
通过在内层dialog上添加append-to-body属性,并设置为true,就可以解决内层dialog上遮罩层无法点击的问题。
#### 引用[.reference_title]
- *1* *2* *3* [el-dialog嵌套使用](https://blog.csdn.net/qq_44860613/article/details/102559284)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)