Element UI Dialog对话框改成固定高度超出部分滚动条滚动
作者：蓝胖子的多啦A梦
这篇文章主要给大家介绍了关于Element UI Dialog对话框改成固定高度超出部分滚动条滚动的相关资料,el-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>
具体效果：
总结
到此这篇关于Element UI Dialog对话框改成固定高度超出部分滚动条滚动的文章就介绍到这了,更多相关Element UI Dialog对话框固定高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！