el-table 高度通过flex实现自适应剩余高度

283301717

已于 2022-05-18 20:27:40 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签： vue.js javascript css elementui

于 2022-05-08 12:39:05 首次发布

本文链接：https://blog.csdn.net/maoeye283301717/article/details/124646481

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

el-table 高度通过flex实现自适应剩余高度
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>测试页</title>
<link rel="stylesheet" type="text/css" href="element-ui.css" />
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="element-ui.js"></script>
<style>
    html, body {
        width:100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F5F7FA;
    }
    .wrap {
        box-sizing: border-box;
        padding: 16px;
        height: 100%;
    }
    .page-layout {
        width: 100%;
        height: 100%;
        padding: 16px;
        box-sizing: border-box;
        border: 1px solid #EBEEF5;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #fff;
        border-radius: 3px;
    }
    .main {
        flex-grow: 1;
        overflow: hidden;
        max-height: 100%;
    }
    .el-table {
        height: 100%!important;
        width: 100%;
    }
    .el-table__header th {
        background-color: #F5F7FA;
    }
    footer {
        padding-top: 16px;
        text-align: right;
    }
</style>
</head>
<body>
<div class="wrap">
    <div class="page-layout">
        <header>
            <el-form inline size="small">
                <el-form-item label="名称"><el-input></el-input></el-form-item>
                <el-form-item label="活动区域"><el-input></el-input></el-form-item>
                <el-form-item label="活动形式"><el-input></el-input></el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">搜索</el-button>
                    <el-button size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </header>
        <section class="main">
            <el-table :data="tableData" border size="small" height="auto">
                <el-table-column prop="date" label="日期" min-width="200"> </el-table-column>
                <el-table-column prop="name" label="姓名" min-width="400"></el-table-column>
                <el-table-column prop="address" min-width="400"  label="地址"></el-table-column>
            </el-table>
        </section>
        <footer>
            <el-pagination
                :current-page="1"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </footer>
    </div>
</div>
<script>
    new Vue({
        el: '.wrap',
        data: function() {
            return {
                tableData: []
            }
        },
        created() {
            for (let i = 0;i <= 100;i++) {
                this.tableData.push({
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                })
            }
        }
    })
</script>
</body>
</html>

283301717

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
el-table 高度通过flex实现自适应剩余高度

el-table 高度通过flex实现自适应剩余高度<!DOCTYPE html><html><head><title>测试页</title><link rel="stylesheet" type="text/css" href="element-ui.css" /><script type="text/javascript" src="vue.min.js"></script><scrip
复制链接

扫一扫