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

问题描述

elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的70%，内容过多时在对话框内出现滚动条。但是这样设置会造成高度不能根据内容自适应，始终是70%。可以有两种方法实现：

一具体代码如下：

<template>    <div>        <el-dialog v-el-drag-dialog :close-on-click-modal="false" v-if="orderDetailVisible"            :title="$t('workOrder.workOrderDetail')"            :visible.sync="orderDetailVisible"             class="showAll_dialog"            width="70%" :before-close="close">            <div id="printJS-form">                <!-- 需要打印的区域 -->                <div class="table-d tableBox" id="box">                    <el-table ref="tableG" :header-cell-style="{ color: '#FFF', background: '#333' }"                        :cell-style="{ color: '#FFF', background: '#333' }" :default-sort="{ prop: 'stockNo', order: '' }"                        :data="gridData" id="pagetable" :row-key="getRowKeys" border style="width:100%;"                        @selection-change="handleSelectionChange">                        <template slot="empty">                            <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>                        </template>                        <el-table-column prop="feederInfo" :sortable="true" :label="$t('workOrder.stationInfo')" />                        <el-table-column prop="outNum" :sortable="true" :label="$t('workOrder.quantityIssued')" />                   </el-table>                </div>            </div>        </el-dialog>    </div></template>

样式修改

// 修改对话框高度.showAll_dialog {    overflow: hidden;    ::v-deep .el-dialog {        margin: 0 auto !important;        height: 70%;        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: 0 15px;        }    }

具体效果：

方法二: 主要是运用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>

具体效果：

本文链接：https://www.kjpai.cn/news/2024-04-29/163496.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！