vue3 中 v-show 分页问题

This topic created in 500 days ago, the information mentioned may be changed or developed.

const pagination = reactive({ page: 1, total: 9, page_size: 3 }) const showChart = computed(() => (i: number) => { let offset = (pagination.page-1)*pagination.page_size console.log(i, i > offset && i <= offset+pagination.page_size) return i > offset && i <= offset+pagination.page_size })

首次展示正确，点击分页按钮后不切换，这个怎么实现?

v-show

pagination

showChart

4 replies 2024-12-30 14:42:15 +08:00

doco

Dec 30, 2024

showChart 如果是绑定到图表上控制显隐的话直接改成方法, 不要用 computed
```
function showChart(index: number) {
...
}
```

zhuoyue100

Dec 30, 2024

就是页面有 9 个元素，每次显示 3 个，用的 element plus 分页插件，分页时控制元素的显示隐藏，我上面写的没效果

dingjs

Dec 30, 2024

把计算属性去掉就行了，这个返回函数多此一举，猜测应该是 computed 返回的函数未立即执行，没能收集到依赖，在分页变化后不会更新对应的函数。

分页场景下更合理的是用计算属性 + 数组 slice 直接返回应该展示的数据，而不是用 v-show 。

typescript```
// 第一种改法
const showChart = (i: number) => {
let offset = (paginatio.page - 1) * pagination.page_size;

return i > offset && i <= offset + pagination.page_size;
};
```

zhuoyue100

Dec 30, 2024

@dingjs 按照你的方法可以了，感谢~