Vue3组合式API中PrimeVue DataTable复选框全选异常问题

核心原因：dataKey字段不匹配 #

PrimeVue DataTable的dataKey是用来唯一标识每行数据的关键属性，你从Laravel API获取的数据中，id字段的键名大概率是大写的Id（Laravel模型默认序列化后属性为驼峰式），但代码里dataKey="id"用的是小写，导致组件无法区分不同行，点击任意复选框都会触发全选。

另外，多选场景下selectedItem未正确初始化为数组，也可能加剧异常表现。

具体修复步骤 #

1. 匹配dataKey与API返回字段名 #

先通过控制台确认API返回的数据结构：

// 在fetchData函数中添加日志
console.log(response.data[0]);

如果输出结果是{ Id: 1, Name: "xxx" }，就把dataKey改成"Id"：

<DataTable v-model:selection="selectedItem" :value="itemsFromApi" dataKey="Id" tableStyle="min-width: 50rem">

2. 正确初始化多选绑定变量 #

多选模式下，v-model:selection绑定的变量必须是数组类型，修改初始化代码：

const selectedItem = ref([]); // 替换原有的ref()

3. 可选：统一前后端字段命名优化 #

如果想让后端返回小写id，可以在Laravel模型中自定义序列化规则：

// 示例Laravel模型代码
public function toArray()
{
    return [
        'id' => $this->id,
        'name' => $this->name,
        // 其他字段按需求调整
    ];
}

这样后端返回的JSON字段就是小写id，前端无需修改dataKey。

修复后完整代码示例 #

<template>
    <DataTable v-model:selection="selectedItem" :value="itemsFromApi" dataKey="Id" tableStyle="min-width: 50rem">
        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
        <Column field="Id" header="id"></Column>
        <Column field="Name" header="Nazwa"></Column>
    </DataTable>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const selectedItem = ref([]);
const itemsFromApi = ref([]);

const fetchData = async () => {
    try {
        const response = await axios.get('API_URL');
        itemsFromApi.value = response.data;
        console.log(response.data[0]); // 验证字段结构
    } catch (error) {
        console.error('Error: ', error);
    }
}

onMounted(fetchData);
</script>

额外排查点 #

如果修复后仍有问题，检查：

• API返回的每条数据是否都有唯一的Id（或id）值，无重复
• 确认itemsFromApi最终值是数组类型（LaravelModel::all()转JSON后应为数组）

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