分享一个vue动态实现根据不同分辨率获取数据表格一页条目

<template>
    <div>
        <div class="table" ref="tableDom">
            <!-- 放表格 -->
            <!-- 放分页组件 -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 0,
        }
    },
    mounted() {
        // 等页面dom都加载完再获取表格
        this.$nextTick(() => {
            this.pageSize = 0;
            let nodeHeight = this.$refs.tableDom.offsetHeight;
            let tableTitleHeight = 41;
            this.pageSize = Math.floor(
                (nodeHeight - tableTitleHeight) / 41 - 1 // 减去表头和分页器部分
            );
        })
    }
}
</script>

<style lang="scss" scoped>
.table{
    // 一定要给表格高度
    height: calc(100% - 20px);
}
</style>

当我们固定pageSize的时候不同分辨率会出现表格滚动条，通过此方法就能实现根据高度动态获取一页条数，谢谢大家。