设置el-dialog的高
时间: 2023-07-22 07:12:47 浏览: 84
可以通过设置 `el-dialog` 的 `height` 属性来控制其高度,例如:
```html
<el-dialog
title="Dialog Title"
:visible.sync="dialogVisible"
:height="400">
<!-- 对话框内容 -->
</el-dialog>
```
在上面的示例中,我们将 `el-dialog` 的 `height` 属性设置为 `400`,从而使其高度为 `400px`。你可以根据实际需要来设置 `height` 属性的值。
相关问题
el-dialog 内的组件高度随着el-dialog高度
可以通过设置el-dialog的高度为100%以及给el-dialog-body设置flex: 1来实现el-dialog内的组件高度随着el-dialog高度的变化而变化。
代码示例:
```
<template>
<el-dialog :visible.sync="dialogVisible" :style="{height: '100%'}">
<el-dialog-body style="display: flex; flex-direction: column; justify-content: space-between; flex: 1;">
<div>这是一个组件</div>
<div>这是另一个组件</div>
</el-dialog-body>
</el-dialog>
</template>
```
多个el-dialog嵌套后 .el-dialog_body样式如何根据不同el-dialog区分设置
可以通过给每个 `el-dialog` 组件添加一个不同的 `class`,然后使用该 `class` 来区分设置不同的样式。
例如,假设你有两个 `el-dialog` 组件,一个是 `dialog-1`,另一个是 `dialog-2`,你可以给它们分别加上不同的 `class`:
```html
<el-dialog class="dialog-1">
...
</el-dialog>
<el-dialog class="dialog-2">
...
</el-dialog>
```
然后在 CSS 中,你可以通过选择器来对不同的 `el-dialog` 组件进行不同的样式设置:
```css
.dialog-1 .el-dialog__body {
/* 设置 dialog-1 中 el-dialog__body 的样式 */
}
.dialog-2 .el-dialog__body {
/* 设置 dialog-2 中 el-dialog__body 的样式 */
}
```
这样就可以根据不同的 `class` 区分设置不同的样式了。
阅读全文