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));
}
}性能优化建议
- 大数据量处理：使用
Set存储选中项提高查找效率 - 分页加载：对于跨页全选，建议后端返回已选中的ID列表而非全部数据
- 防抖处理：频繁操作时可添加防抖逻辑
完整实现需根据具体业务场景调整，例如使用 Vuex/Pinia 管理全局选中状态，或结合服务端分页优化性能。
