本文介绍如何结合 element plus 的响应式栅格系统与窗口宽度监听，实现分页组件 pagesize 的动态适配，使每页显示数量随屏幕尺寸自动调整，提升不同设备下的用户体验。
本文介绍如何结合 element plus 的响应式栅格系统与窗口宽度监听，实现分页组件 pagesize 的动态适配，使每页显示数量随屏幕尺寸自动调整，提升不同设备下的用户体验。
在使用 Element Plus 构建响应式布局时，常需让分页器（<el-pagination>）的每页条目数（pageSize）与栅格列数（如 xs/sm/md 等）协同变化。例如：小屏（xs/sm）下每行显示 2 列，适合每页展示 6 条；中屏（md/lg）每行 3 列，对应每页 9 条；大屏（xl）每行 4 列，则设为每页 12 条——这正是「pageSize = gridColumns × 3」逻辑的直观体现。
要实现该效果，核心在于将窗口宽度映射为分页尺寸，并实时同步至分页配置与可选页码数组。推荐采用 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 < 768) return 6 // xs/sm: 2列 × 3
if (width.value < 992) return 6 // sm/md临界过渡
if (width.value < 1200) return 9 // md/lg: 3列 × 3
if (width.value < 1920) return 9 // lg/xl过渡
return 12 // xl及以上: 4列 × 3
})
// 动态生成 page-sizes 数组（如 [6, 12, 18, 24]）
const pageSizes = ref<number[]>([])
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" @refresh-list="getListData" /> </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" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
⚠️ 注意事项：
- 避免直接在 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 全局配置断点，可考虑提取断点值为常量，增强一致性。
通过该方案，分页尺寸真正“活”了起来——它不再是一个静态配置，而是响应式布局的自然延伸，让列表在手机、平板、桌面端均呈现最优信息密度。
