Primeng P-Table分页器下拉框切换事件需求及滚动处理

核心思路 #

给分页器的下拉框绑定change事件，在分页尺寸切换、表格完成重新渲染后，将页面滚动到表格的顶部位置。

原生JavaScript实现 #

假设你的分页下拉框ID是page-size-select，表格容器ID是table-container：

// 获取下拉框元素
const pageSizeSelect = document.getElementById('page-size-select');

// 绑定change触发事件
pageSizeSelect.addEventListener('change', function() {
    // 延迟执行，确保表格已完成渲染（时间可根据实际渲染速度调整）
    setTimeout(() => {
        const tableContainer = document.getElementById('table-container');
        // 滚动到表格顶部，支持平滑滚动
        tableContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
});

Vue框架实现 #

模板中绑定change事件：

<select v-model="currentPageSize" @change="handlePageSizeChange">
    <option value="10">10条/页</option>
    <option value="50">50条/页</option>
    <option value="100">100条/页</option>
</select>

在methods中定义事件处理逻辑：

methods: {
    handlePageSizeChange() {
        // 利用$nextTick等待DOM更新完成（表格渲染完毕）
        this.$nextTick(() => {
            const tableContainer = document.getElementById('table-container');
            tableContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    }
}

React框架实现 #

组件中绑定onChange事件：

<select value={pageSize} onChange={handlePageSizeChange}>
    <option value="10">10条/页</option>
    <option value="50">50条/页</option>
    <option value="100">100条/页</option>
</select>

定义事件处理函数：

const handlePageSizeChange = (e) => {
    setPageSize(e.target.value);
    // 等待表格重新渲染后执行滚动
    setTimeout(() => {
        const tableContainer = document.getElementById('table-container');
        tableContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
};

关键注意事项 #

• 必须等待表格完全渲染完成后再执行滚动操作，否则会出现滚动位置不准确或无效的情况；
• scrollIntoView的block: 'start'参数确保页面精准滚动到表格的顶部边缘；
• 延迟时间或Vue的$nextTick、React的useEffect（可替代setTimeout）需根据项目的表格渲染速度灵活调整。

内容的提问来源于stack exchange，提问作者Feng Zhang