el-pagination根据页面高度自动计算page-sizes

最新推荐文章于 2024-07-19 10:30:06 发布

D_Fortune

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量98

点赞数 2

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

本文链接：https://blog.csdn.net/D_Fortune/article/details/140521510

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<template>
  <el-pagination
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1000,
      pageSizes: [10, 20, 30, 40, 50]
    };
  },
  created() {
    this.calculatePageSizes();
   
  },
  methods: {
    calculatePageSizes() {
      // 假设每条数据高度约为40px，并且你想要留出一定的边距和其他布局元素的空间
      const approxItemHeight = 40; 
       // 留出布局
      const marginAndPadding = 200; 
 
      // 计算可以显示多少条数据
      const pageSize = Math.floor((window.innerHeight - marginAndPadding) / approxItemHeight);
 
      // 根据计算结果更新 pageSizes
      this.pageSizes = [10, 20, 50, 100].filter(size => size <= pageSize).sort((a, b) => a - b);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>