PrimeVue DataTable分页模式下仅选中当前页行是否可行？

完全可以实现，核心思路是放弃DataTable自带的全局多选逻辑，手动维护当前页的选中状态，模拟Gmail的当前页选择模式。以下是具体实现方案：

实现步骤与代码示例 #

1. 模板部分：自定义多选列

不用DataTable自带的selectableRows和selection属性，手动渲染多选列的复选框，控制仅对当前页数据生效：

<DataTable 
  :value="currentPageData" 
  :paginator="true" 
  :rows="10" 
  :totalRecords="totalRecords" 
  @page="onPageChange"
>
  <!-- 自定义当前页多选列 -->
  <Column headerStyle="width: 3rem">
    <template #header>
      <!-- 当前页全选复选框 -->
      <Checkbox 
        v-model="selectAllCurrentPage" 
        @update:model-value="toggleSelectAllCurrentPage" 
      />
    </template>
    <template #body="slotProps">
      <!-- 每行复选框 -->
      <Checkbox 
        v-model="currentPageSelected" 
        :value="slotProps.data" 
        @update:model-value="syncSelectAllStatus" 
      />
    </template>
  </Column>
  
  <!-- 其他业务列 -->
  <Column field="id" header="ID"></Column>
  <Column field="name" header="名称"></Column>
</DataTable>

2. 脚本部分：维护当前页选中状态

用Composition API实现核心逻辑，包括当前页数据切片、选中项管理、分页重置、数据动态更新处理：

import { ref, computed, watch } from 'vue';
import { Checkbox, DataTable, Column } from 'primevue';

export default {
  components: { Checkbox, DataTable, Column },
  setup() {
    // 全量数据（实际场景从接口获取，支持动态变化）
    const allData = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i+1, name: `条目 ${i+1}` })));
    // 分页参数
    const currentPage = ref(1);
    const rowsPerPage = ref(10);
    // 总记录数
    const totalRecords = computed(() => allData.value.length);

    // 当前页数据切片
    const currentPageData = computed(() => {
      const startIdx = (currentPage.value - 1) * rowsPerPage.value;
      return allData.value.slice(startIdx, startIdx + rowsPerPage.value);
    });

    // 当前页选中的行
    const currentPageSelected = ref([]);
    // 当前页全选状态
    const selectAllCurrentPage = ref(false);

    // 分页切换：重置当前页选中状态
    const onPageChange = (event) => {
      currentPage.value = event.page + 1; // PrimeVue的page从0开始计数
      currentPageSelected.value = [];
      selectAllCurrentPage.value = false;
    };

    // 切换当前页全选/取消全选
    const toggleSelectAllCurrentPage = (checked) => {
      currentPageSelected.value = checked ? [...currentPageData.value] : [];
    };

    // 单行选择后同步全选状态
    const syncSelectAllStatus = () => {
      selectAllCurrentPage.value = currentPageSelected.value.length === currentPageData.value.length;
    };

    // 监听全量数据变化：自动过滤无效选中项
    watch(allData, () => {
      currentPageSelected.value = currentPageSelected.value.filter(selected => 
        currentPageData.value.some(item => item.id === selected.id)
      );
      syncSelectAllStatus();
    }, { deep: true });

    return {
      allData,
      totalRecords,
      currentPageData,
      currentPageSelected,
      selectAllCurrentPage,
      rowsPerPage,
      onPageChange,
      toggleSelectAllCurrentPage,
      syncSelectAllStatus
    };
  }
};

关键逻辑说明 #

• 脱离全局多选束缚：不使用DataTable自带的selection绑定，完全通过本地数组currentPageSelected维护当前页选中项，确保选中范围仅限当前页。
• 分页重置：切换页码时清空选中数组，避免跨页选中的残留数据干扰。
• 动态数据适配：监听全量数据变化，自动过滤当前页不存在的选中项，保证数据更新后选中状态的准确性。
• 全选同步：通过对比当前页数据量和选中项数量，实时更新全选复选框的状态，和Gmail的交互逻辑一致。

内容的提问来源于stack exchange，提问作者Scrub