el-dialog 设置不遮蔽

el-dialog 设置不遮蔽的可能原因有多种。首先，如果在使用嵌套的 Dialog 时没有正确设置 append-to-body 属性，会导致内外层 Dialog 的遮罩层级关系不正确，从而出现不遮蔽的情况。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [el-dialog遮罩层的问题](https://blog.csdn.net/simple_smile1208/article/details/119930950)[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^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]

相关问题

el-dialog 设置大小

el-dialog 是 Element UI 中的一个组件，用于创建弹窗对话框。你可以通过设置其属性来调整弹窗的大小。

el-dialog 组件的大小可以通过设置其 width 和 height 属性来实现。width 属性用于设置弹窗的宽度，可以接受一个字符串或者数字作为值，例如："50%" 或者 500。height 属性用于设置弹窗的高度，同样可以接受一个字符串或者数字作为值。

以下是设置 el-dialog 大小的示例代码：

<template>
  <el-dialog
    title="对话框标题"
    :visible="dialogVisible"
    :width="dialogWidth"
    :height="dialogHeight"
    @close="dialogVisible = false"
  >
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框的显示与隐藏
      dialogWidth: "50%", // 设置对话框的宽度
      dialogHeight: "300px", // 设置对话框的高度
    };
  },
};
</script>

在上述代码中，通过设置 dialogWidth 和 dialogHeight 的值，可以调整 el-dialog 的大小。你可以根据需要修改这两个属性的值来满足你的需求。

el-dialog设置滚动条

要在 el-dialog 中设置滚动条，你可以使用以下步骤：

1. 首先，在 el-dialog 标签上添加一个 `:show-scrollbar` 属性，将其设置为 `true`，以显示滚动条。例如：

<el-dialog :show-scrollbar="true">
  <!-- 对话框内容 -->
</el-dialog>

2. 然后，在对话框的内容部分添加一个包装容器，例如使用 `<div>` 元素，给它设置一个固定的高度和 CSS 属性 `overflow-y: auto`。这将创建一个可滚动的区域。例如：

<el-dialog :show-scrollbar="true">
  <div style="height: 300px; overflow-y: auto;">
    <!-- 对话框内容 -->
  </div>
</el-dialog>

在这个例子中，容器的高度被设置为300px，你可以根据需要调整高度。

这样，你就可以在 el-dialog 中设置滚动条了。记得将对话框内容放在一个可滚动的容器内部。