本文介绍如何结合 element plus 的响应式栅格系统与窗口宽度监听，实现分页组件 pagesize 的动态适配，使每页显示数量随屏幕尺寸自动调整，提升不同设备下的用户体验。
本文介绍如何结合 element plus 的响应式栅格系统与窗口宽度监听，实现分页组件 pagesize 的动态适配，使每页显示数量随屏幕尺寸自动调整，提升不同设备下的用户体验。
在使用 Element Plus 构建响应式布局时，常需让分页器（
要实现该效果，核心在于将窗口宽度映射为分页尺寸，并实时同步至分页配置与可选页码数组。推荐采用 Vue 3 Composition API + useWindowSize（或手动监听 resize）的方式，避免硬编码断点，提升可维护性：
import { ref, computed, watch } from 'vue'
import { useWindowSize } from '@vueuse/core' // 推荐：轻量、防抖、响应式
const { width } = useWindowSize()
// 根据宽度动态计算当前 pageSize
const pageSize = computed(() => {
if (width.value ([])
const listVariables = ref({
pagination: {
pageSize: 6,
currentPage: 1,
total: 0
}
})
// 同步更新分页配置与可选尺寸
watch(pageSize, (val) => {
listVariables.value.pagination.pageSize = val
// 基于当前 pageSize 生成合理选项：1×、2×、3×、4× 当前值
pageSizes.value = [1, 2, 3, 4].map(multiple => multiple * val)
}, { immediate: true })
模板中直接绑定即可：
<el-col v-for="item in listVariables.list" :key="item.id" :xs="12" :sm="12" :md="8" :lg="8" :xl="6"><projectlistitem :project-info="item"></projectlistitem></el-col><el-pagination v-model:current-page="listVariables.pagination.currentPage" v-model:page-size="listVariables.pagination.pageSize" :page-sizes="pageSizes" :total="listVariables.pagination.total"></el-pagination>
⚠️ 注意事项：
- 避免直接在 watch 中触发异步请求（如 getListData），应在 @size-change 或 @current-change 回调中处理数据重载；
- useWindowSize 内置防抖，比原生 window.addEventListener('resize') 更健壮；若无法引入 @vueuse/core，请自行封装带防抖的 resize 监听；
- page-sizes 数组建议基于 pageSize 动态生成（如 val, val*2, val*3），而非固定 [6,9,12]，确保选项始终与当前视图逻辑一致；
- 若项目已使用 ElConfigProvider 全局配置断点，可考虑提取断点值为常量，增强一致性。
通过该方案，分页尺寸真正“活”了起来——它不再是一个静态配置，而是响应式布局的自然延伸，让列表在手机、平板、桌面端均呈现最优信息密度。
