el-pagination最核心的两个参数是:

page-sizes 可选每页行数

page-size   当前每页行数

page-sizes为写死的值,例如 [10,15,20,25,30]

page-size写死就不好,例如写10 对应大屏则表格下半部空白,小屏则出现滚动条,所以最好的办法是根据屏幕大小给默认值,尽可能一屏显示最多行且不滚动,算法如下:

第一步:

    //根据屏幕计算合适的行数
    function calculateLimit() {
        // 获取当前窗口高度
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
        // 计算可用高度(减去搜索区域高度、标题高度、底部高度)
        const availableHeight = windowHeight - 144;
        // 假设每条记录大约占40px高度,直接计算
        return Math.floor(availableHeight / 40);
    }

  这个值可能不在page-sizes里,需要从里面选择一个:

// 从limits数组中找到最接近目标值的数值(四舍五入原则)
function findClosestLimit(target, limits) {if (limits.length === 0) return target;let closest = limits[0];let minDiff = Math.abs(target - closest);for (let i = 1; i < limits.length; i++) {const current = limits[i];const diff = Math.abs(target - current);// 当差值更小时更新,或差值相等时取较大值(四舍五入原则)if (diff < minDiff || (diff === minDiff && current > closest)) {closest = current;minDiff = diff;}}return closest;
}

其中target是calculateLimit算出的合适值,limits是预定的分页选项数组,最终结果是数组中最合适的选项