vue实现分页全选

Vue 实现分页全选功能

分页全选功能通常需要结合表格、分页组件和复选框实现，核心逻辑包括当前页全选、跨页全选以及状态同步。以下是具体实现方法：

基础数据结构

在 Vue 的 data 或 setup 中定义必要的数据：

data() {
  return {
    tableData: [],       // 当前页数据
    allData: [],         // 所有数据（需根据分页动态加载）
    selectedRows: [],    // 已选中的行（跨页存储ID或其他唯一标识）
    currentPage: 1,      // 当前页码
    pageSize: 10,        // 每页条数
    isAllSelected: false // 当前页全选状态
  }
}

当前页全选逻辑

通过复选框绑定当前页的全选状态：

<el-checkbox v-model="isAllSelected" @change="handlePageSelectAll">
  全选当前页
</el-checkbox>

methods: {
  handlePageSelectAll(checked) {
    const currentPageIds = this.tableData.map(item => item.id);
    if (checked) {
      // 合并已选中的行（去重）
      this.selectedRows = [...new Set([...this.selectedRows, ...currentPageIds])];
    } else {
      // 移除当前页所有选中项
      this.selectedRows = this.selectedRows.filter(id => !currentPageIds.includes(id));
    }
  }
}

跨页全选逻辑

添加一个“全选所有页”的复选框，通常需要后端支持：

<el-checkbox 
  :indeterminate="isIndeterminate" 
  v-model="isAllSelectedCrossPage"
  @change="handleCrossPageSelectAll"
>
  全选所有页（共 {{ total }} 条）
</el-checkbox>

methods: {
  async handleCrossPageSelectAll(checked) {
    if (checked) {
      // 调用API获取所有符合条件的ID（需根据业务场景优化）
      const res = await api.getAllIds();
      this.selectedRows = res.data;
    } else {
      this.selectedRows = [];
    }
  }
}

单个复选框同步

每个行项目的复选框需要与全局选中状态同步：

<el-checkbox 
  v-model="row.selected" 
  @change="(val) => handleSingleSelect(row.id, val)"
/>

methods: {
  handleSingleSelect(id, checked) {
    if (checked) {
      this.selectedRows.push(id);
    } else {
      this.selectedRows = this.selectedRows.filter(item => item !== id);
    }
    // 更新当前页全选状态
    this.isAllSelected = this.tableData.every(item => 
      this.selectedRows.includes(item.id)
    );
  }
}

分页切换时的状态同步

在分页切换时重置当前页全选状态：

watch: {
  tableData(newVal) {
    this.isAllSelected = newVal.length > 0 && 
      newVal.every(item => this.selectedRows.includes(item.id));
  }
}

性能优化建议

1. 大数据量处理：使用 Set 存储选中项提高查找效率
2. 分页加载：对于跨页全选，建议后端返回已选中的ID列表而非全部数据
3. 防抖处理：频繁操作时可添加防抖逻辑

完整实现需根据具体业务场景调整，例如使用 Vuex/Pinia 管理全局选中状态，或结合服务端分页优化性能。