vue为单独el-dialog__body设置高度

你可以通过设置 `max-height` 属性来为单独的 `el-dialog__body` 设置高度，如下所示：

<el-dialog :visible.sync="dialogVisible">
  <div slot="title">Dialog Title</div>
  <div class="my-dialog-body" slot="body">
    <div class="el-dialog__body-content">
      <!-- Your content goes here -->
    </div>
  </div>
</el-dialog>

.my-dialog-body {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 滚动条 */
}

这里通过为 `el-dialog__body` 的父元素设置一个自定义的 class，然后在 CSS 中为该 class 设置 `max-height` 属性来设置高度。同时，为了让内容超出高度时出现滚动条，还需要为该 class 设置 `overflow-y: auto` 属性。

相关问题

scope中.el-dialog__body修改不生效

如果您想要修改 `.el-dialog__body` 的样式，可以考虑在该样式的前面加上 `::v-deep`，如下所示：

<style scoped>
::v-deep .el-dialog__body {
  /* 在此处添加您想要修改的样式 */
}
</style>

这是因为在 Vue 的单文件组件中，`<style>` 标签默认会启用 scoped 特性，以避免样式污染和冲突。但是有时候您可能需要修改某些子组件的样式，这时候就可以使用 `::v-deep` 来穿透父组件的样式作用域，直接影响子组件的样式。希望这能对您有所帮助！

vue3 el-dialog高度设置

在Vue3中，可以通过给el-dialog元素添加自定义的样式来设置其高度。可以在el-dialog外部套一层div，并给这个div添加一个自定义的类名，然后在样式中设置这个类名的高度即可。下面是一个示例代码：

<<引用:现在要实现一种窗口高度固定，内容滚动的方式，如下直接在内容上套一层div并加上自定义样式el-dialog-div &lt;el-dialog :title="templateTitle" :visible.sync="openTemplateDialog" :width="templateDialogWidth" append-to-body :close-on-click-modal="false" &gt; &lt;div class="el-dialog-div"&gt; // 窗口内容 &lt;/div&gt; &lt;/el-dialog&gt; &lt;style lang="scss"&gt; .el-dialog-div { height: 60vh; overflow-x: hidden; } &lt;/style&gt; 。

el-dialog默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。为了解决这个问题，你可以使用以下方法来设置el-dialog的高度：

1. 在el-dialog外部套一层div，并给这个div添加一个自定义的类名，比如"el-dialog-div"。
2. 在样式中设置这个类名的高度，比如设置为60vh，表示60%的视口高度。
3. 同时，设置这个div的overflow-x属性为hidden，以隐藏水平滚动条。

这样，el-dialog的高度就会被固定为60%的视口高度，并且出现内容超出时会出现垂直滚动条，而按钮和标题则保持固定不动，提升了用户体验。