el-dialog中el-table实现自适应

Raslirty

已于 2023-06-06 10:01:16 修改

阅读量2.5k

点赞数 2

分类专栏：日常bug修改文章标签： vue.js javascript 前端

于 2023-06-05 16:14:08 首次发布

本文链接：https://blog.csdn.net/raslirty/article/details/131049841

版权

日常bug修改专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了如何通过修改el-dialog的CSS样式，将其设置为flex布局来实现内部元素的自适应。特别是el-table，通过在外层添加div并设置高度和宽度，可以调整el-table的尺寸，使其在dialog中实现百分比高度的自适应。同时提到了el-table列宽使用min-width进行自适应设置。

摘要由CSDN通过智能技术生成

示例代码

<style>
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 90%;
        margin: 0 5% !important;
    }
    .el-dialog__header {
        height: 5%;
    }
    .el-dialog__body {
        height: 95%;
        padding: 0 2%;
    }
    .el-dialog__wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
</style>
<div id="container">
    <el-dialog title="title" :visible.sync="dialogVisible"
               width="90%" height="100%">
        <div style="display: flex; width: 100%; height: 100%">
            <div style="height: 25%; width: 50%; padding: 0 1%; display: flex; flex-direction: column;">
                <el-table
                        :data="tableData"
                        stripe
                        border
                        height="100%"
                        v-loading="loading">
                    <el-table-column
                            prop="prop1"
                            min-width="50%"
                            label="label">
                    </el-table-column>
                    <el-table-column
                            prop="prop2"
                            min-width="25%"
                            label="label">
                    </el-table-column>
                    <el-table-column
                            prop="prop3"
                            min-width="25%"
                            label="label">
                    </el-table-column>
                </el-table>
            </div>
            <div style="width: 50%; padding: 0 1%;"></div>
        </div>
    </el-dialog>
</div>

el-dialog内部元素自适应

el-dialog中的el-table无法实现自适应布局，试了很久dialog本身的高度就是无视项目侧边栏等直接取到全屏高度。el-table想在其中设定百分比是无效的。

首先修改dialog为flex布局

<style>
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 90%;
        margin: 0 5% !important;
    }
    .el-dialog__header {
        height: 5%;
    }
    .el-dialog__body {
        height: 95%;
        padding: 0 2%;
    }
    .el-dialog__wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
</style>

el-table 自适应高宽

el-table外的div要是height: 100%，再补充一个div在el-table外部设置宽度和高度就可改变el-table的高和宽.

<div style="height: 25%; width: 50%; padding: 0 1%; display: flex; flex-direction: column;">
    <el-table
            :data="tableData"
            stripe
            border
            height="100%"
            v-loading="loading">
        <el-table-column
                prop="prop1"
                min-width="50%"
                label="label">
        </el-table-column>
        <el-table-column
                prop="prop2"
                min-width="25%"
                label="label">
        </el-table-column>
        <el-table-column
                prop="prop3"
                min-width="25%"
                label="label">
        </el-table-column>
    </el-table>
</div>