前端表格分页时，如何根据使用不同分辨率电脑来动态计算一页的数据量

做前端开发的时候很容易遇到需要分页的表格，这时就有一个问题，不同分辨率的电脑能展示的数据条数是不一样的，那我们如何根据不同分辨率实现动态计算一页展示的数据条数。这里我分享一下我的处理方式。

<template>
	<div class="maptable">
	     <el-table :data="mapData" border>
	         <el-table-column align="center" v-for="(val,index) in logHader" :key=index :prop="val.prop" :label="val.label" :show-overflow-tooltip="true">
	             
	         </el-table-column>
	     </el-table>
	     <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="pagesize" @pagination="current_change" />
	 </div>
 </template>
 <script>
	export default {
		data(){
			return {
				logHader:[{
                    label:"服务名称",
                    prop:"name"
                }],
                pagesize:10,//页面展示数据条数,
                currentPage:1
			}
		},
		mounted(){
			//页面挂在后通过表格容器的高度和每行的高度来计算条数
	        this.pagesize = parseInt(document.querySelector('.maptable').offsetHeight/44)-2;
	        this.getData();
	    },
	    methods:{
			getData(){
				let query = {
	                page:this.currentPage,//请求的当前页
	                limit:this.pagesize,//请求数据条数
	            }
	            getMapControl(query).then(res=>{
	                this.mapData = res.data.dataList;
	                this.total = res.data.count;
	            })
			}
		}
	}
 </script>

这里我给表格加了个容器，通过动态获取容器高度计算页面能展示的数据条数，这里记得加“:show-overflow-tooltip=“true””属性，因为如果表格有可能内容换行那样行高就不能确定。同时这里offsetHeight的性能不是很好，如果有循环要慎用！
如果大家有更好的办法，希望给我留言。