快捷導(dǎo)航

Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動

更新時間：2024年05月16日 09:04:34 作者：藍(lán)胖子的多啦A夢

這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過屏幕時會出現(xiàn)滾動條,按鈕和標(biāo)題都會隨著滾動,用戶體驗不好,需要的朋友可以參考下

問題描述

elememt ui 中的el-dialog對話框如果內(nèi)容過多高度會被無限拉長。要將其設(shè)置成固定高度，此處我設(shè)置的是頁面總高度的70%，內(nèi)容過多時在對話框內(nèi)出現(xiàn)滾動條。但是這樣設(shè)置會造成高度不能根據(jù)內(nèi)容自適應(yīng)，始終是70%?？梢杂袃煞N方法實現(xiàn)：

一具體代碼如下：

<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">
                <!-- 需要打印的區(qū)域 -->
                <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;
            // 下邊設(shè)置字體，我的需求是黑底白字
            color: #ffffff;
            line-height: 30px;
            padding: 0 15px;
        }
    }

具體效果：

方法二: 主要是運用element ui 中的el-scrollbar組件，將dialog的body部分包裹起來。代碼如下：

// 內(nèi)容
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="836px"
      @closed="handleClose">
      <!-- 設(shè)置對話框內(nèi)容高度 -->
      <div style="height:70vh">
        <el-scrollbar>
          <div class="content-box">{{ message }}</div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>
// 樣式，只設(shè)置了個行高
<style lang="scss" scoped>
  .content-box{
    line-height: 30px;
  }
</style>