Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动

问题描述

elememt ui 

中的

el-dialog

对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的80%，内容过多时在对话框内出现滚动条。

但是这样设置会造成高度不能根据内容自适应，始终是80%。

可以有两种方法实现：

方法一:

具体代码如下：

// 内容<template><el-dialog
      :title="title":visible.sync="dialogVisible"
      class="showAll_dialog"
      width="1000px"></el-dialog></template>// 样式<style lang="scss" scoped>// 修改对话框高度.showAll_dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;::v-deep .el-dialog {
      margin:0auto!important;
      height:80%;
      overflow: hidden;
      background-color: black;.el-dialog__body {
        position: absolute;
        left:0;
        top:54px;
        bottom:0;
        right:0;
        padding:0;
        z-index:1;
        overflow: hidden;
        overflow-y:auto;// 下边设置字体，我的需求是黑底白字
        color: #ffffff;
        line-height:30px;
        padding:015px;}}}

具体效果：

方法二:

主要是运用element ui 中的el-scrollbar组件，将dialog的body部分包裹起来。代码如下：

// 内容<template><div><el-dialog
      :visible.sync="dialogVisible"
      width="836px"
      @closed="handleClose"><!-- 设置对话框内容高度 --><div style="height:70vh"><el-scrollbar><div class="content-box">{{ message }}</div></el-scrollbar></div></el-dialog></div></template>// 样式，只设置了个行高<style lang="scss" scoped>.content-box{
    line-height:30px;}</style>

具体效果：