Element 中根据屏幕大小动态计算表格高度以实现固定表头

越陌度阡

发布于 2021-02-01 11:57:40

2.2K0

发布于 2021-02-01 11:57:40

在Element UI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。

以下是代码实现：

<template>
    <div class="table-container">
        <!-- 1. 绑定动态计算的表格高度 -->
        <el-table :data="data" style="width:100%" :height="tableHeight">
            ...
            ...
        </el-table>
    </div>
</template>

<script>


export default {
    name:"index",

    data() {
        return {
            // 2. 声明表格高度的变量
            tableHeight:0,
        };
    },

    created() {
        // 3. 动态计算表格高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
        this.tableHeight = windowHeight - 100;
    },

};
</script>

注意：上面代码中第3步的减100，根据实际情况而定，通常包含面包屑区域高度、条件检索区域高度、底部分页区域的高度。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/01/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

element