情况
根据 element-plus.org 的文档:https ://element-plus.org/#/en-US/component/pagination 您应该能够为分页组件设置当前页面。
我的页面/组件可以工作,除非我以新的页面加载进入页面,我希望组件接管转换为反应变量“currentPage”的参数“page”并使用它将当前页面设置为突出显示在组件中。
问题
然而,即使属性被设置为 3,组件仍然显示第 1 页。 currentPage 是完全反应式的,并且在其上方的 mustache 中解析时会显示。
文档不一致?
我尝试了不同的东西,但他们自己的文档也不一致,或者我很笨。
在“更多元素”示例中显示v-model:currentPage="currentPage1"
,但在“属性”部分中显示::current-page
和:default-current-page
. 两者都不起作用。
我的代码[模板]:
{{ currentPage }} <!-- this actually shows the page I am currently on from param -->
<el-pagination
@current-change="paginate"
:currentPage="currentPage"
:current-page="currentPage"
:default-current-page="currentPage"
:total="data.length"
:page-size="limit"
:pager-count="6"
layout="prev, pager, next"
>
</el-pagination> <!-- evil component only highlights (default) 1 -->
中的相关部分setup()
:
const currentPage = ref();
watch(props, () => {
currentPage.value = router.currentRoute.value.params.page || 1;
initOutputVal();
});
// pagination
const paginate = (e) => {
router.push({ params: { page: e } });
};
const initOutputVal = () => {
let startSlice = (currentPage.value - 1) * props.limit;
output.value = props.limit ? props.data.slice(startSlice, startSlice + props.limit) : props.data;
};
有谁知道我做错了什么?element-plus 不测试他们的东西还是我在这里无知?最好的解决方案是什么?