Element Plus中el-pagination组件current-page属性绑定不生效问题求助

错误原因 #

• 类型不匹配：路由params.page默认是字符串类型，Element Plus分页组件的current-page属性仅接收数字类型，传入字符串会被判定为无效值，自动 fallback 到默认值1，这是最核心的问题。
• 属性绑定冲突：你同时绑定了currentPage、current-page、default-current-page三个相关属性，其中default-current-page仅在组件首次初始化时生效，不会响应后续变量更新，多个同功能属性绑定会导致优先级混乱。
• 监听逻辑不合理：你监听的是props而非路由参数，且currentPage没有初始值，组件首次渲染时取不到有效页码，直接用了默认值1，后续currentPage更新时因为绑定了不支持响应更新的default-current-page，导致组件不会同步刷新。
• API 用法混淆：v-model:currentPage是Vue模板中 kebab-case 属性的驼峰写法简写，和v-model:current-page完全等效，文档写法没有冲突，你没有用双向绑定的写法，单独单向传值没有配套处理组件内部的更新同步。

修正方案 #

模板代码（删除冗余属性，用正确的双向绑定）

{{ currentPage }}
<el-pagination
  v-model:current-page="currentPage"
  :total="data.length"
  :page-size="limit"
  :pager-count="6"
  layout="prev, pager, next"
>
</el-pagination>

setup 代码（修正类型转换和监听逻辑）

// 初始化时就把路由参数转成数字
const currentPage = ref(Number(router.currentRoute.value.params.page) || 1);
// 监听路由页码变化，同步更新currentPage
watch(
  () => router.currentRoute.value.params.page,
  (newPage) => {
    currentPage.value = Number(newPage) || 1;
    initOutputVal();
  },
  { immediate: true } // 首次加载立即执行
);
// 监听currentPage变化，同步更新路由
watch(currentPage, (newPage) => {
  router.push({ params: { page: newPage } });
});

const initOutputVal = () => {
  let startSlice = (currentPage.value - 1) * props.limit;
  output.value = props.limit ? props.data.slice(startSlice, startSlice + props.limit) : props.data;
};

补充说明 #

如果确实需要在props变化时重新计算分页数据，单独再加一个对props的监听即可，不要和路由监听逻辑混在一起。

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