使用 vue 全选已经分页的数据

vue 中可以对后端分页后的数据进行全选操作，但当切换页码时，由于重新请求接口，这些数据会被复原。

解决方案：

前端进行分页处理，将所有数据一次性从后端获取，再前端分页展示。

代码实现：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

1. 获取所有数据，前端分页展示：

mounted() {
  this.$http.get('/data').then((res) => {
    this.data = res.data;
    this.currentpage = 1;
    this.limit = 8;
  });
}

2. 点击全选按钮：

selectAll() {
  this.data.forEach((item) => {
    item.checked = true;
  });
}

原理：

前端一次性获取所有数据后，进行分页展示。只要数据在前端，就可以独立于后端分页进行全选操作，不受切换页码的影响。