vue实现分页全选
Vue 实现分页全选功能
分页全选功能通常用于表格或列表数据，允许用户跨页批量选择数据。以下是实现该功能的几种方法：
使用 Vuex 或 Pinia 管理选中状态
全局状态管理工具（如 Vuex 或 Pinia）可以方便地管理跨页选中状态。
// 假设使用 Pinia
import { defineStore } from 'pinia'
export const useSelectionStore = defineStore('selection', {
state: () => ({
selectedItems: new Set(),
allPageItems: []
}),
actions: {
toggleSelect(item) {
if (this.selectedItems.has(item.id)) {
this.selectedItems.delete(item.id)
} else {
this.selectedItems.add(item.id)
}
},
selectAllInPage(currentPageItems) {
currentPageItems.forEach(item => {
this.selectedItems.add(item.id)
})
},
clearSelection() {
this.selectedItems.clear()
}
}
})组件实现
在表格组件中，实现全选和分页选择逻辑：
<template>
<table>
<thead>
<tr>
<th>
<input
type="checkbox"
:checked="allSelectedInPage"
@change="toggleSelectAllInPage"
/>
</th>
<!-- 其他表头 -->
</tr>
</thead>
<tbody>
<tr v-for="item in currentPageItems" :key="item.id">
<td>
<input
type="checkbox"
:checked="isSelected(item)"
@change="toggleSelect(item)"
/>
</td>
<!-- 其他单元格 -->
</tr>
</tbody>
</table>
</template>
<script>
import { useSelectionStore } from '@/stores/selection'
export default {
props: ['currentPageItems'],
setup() {
const selectionStore = useSelectionStore()
const isSelected = (item) => {
return selectionStore.selectedItems.has(item.id)
}
const toggleSelect = (item) => {
selectionStore.toggleSelect(item)
}
const toggleSelectAllInPage = (event) => {
if (event.target.checked) {
selectionStore.selectAllInPage(currentPageItems)
} else {
currentPageItems.forEach(item => {
selectionStore.selectedItems.delete(item.id)
})
}
}
const allSelectedInPage = computed(() => {
return currentPageItems.every(item =>
selectionStore.selectedItems.has(item.id)
)
})
return {
isSelected,
toggleSelect,
toggleSelectAllInPage,
allSelectedInPage
}
}
}
</script>跨页全选实现
如果需要实现真正的"全选"（包括不在当前页的数据），需要：
- 获取所有数据的ID列表
- 维护一个全选状态
// 在 Pinia store 中添加
selectAll(allItems) {
this.clearSelection()
allItems.forEach(item => {
this.selectedItems.add(item.id)
})
}
isAllSelected(allItems) {
return allItems.every(item => this.selectedItems.has(item.id))
}性能优化建议
对于大数据量，使用ID而不是对象引用会更高效。考虑以下优化：
- 使用Map或Set存储选中ID
- 虚拟滚动处理大量数据
- 分页请求时携带已选ID列表
注意事项
- 分页数据变化时需要同步更新选中状态
- 服务器端分页时可能需要特殊处理
- 内存管理对于大量数据很重要
以上实现可以根据具体需求进行调整，例如添加部分选中状态、排除特定项等功能。
