Vue.js 3中v-data-table单选复选框实现问题求助

你设置:single-select="true"后仍能多选，核心问题多是绑定变量类型错误或事件逻辑干扰，以下是具体修复方案：

1. 修正v-model绑定的变量类型 #

开启single-select和return-object后，v-model绑定的selectedItems必须是单个对象而非数组。如果初始化为数组（比如[]），组件会默认按多选逻辑处理。

修改初始化代码：

// 错误写法（数组）
selectedItems = []

// 正确写法（单个对象/空值）
selectedItems = null

2. 检查@click:row事件逻辑 #

你的代码绑定了@click:row="OnClick"，如果OnClick方法里手动把选中项追加到数组，会覆盖single-select的原生行为。确保方法逻辑是替换选中项而非追加：

const OnClick = (item) => {
  // 直接替换为当前点击的项
  selectedItems = item
  // 其他业务逻辑...
}

3. 确认组件属性的正确组合 #

确保关键属性配置无误：

• :single-select="true"：必须显式设为true
• item-key="deviceId"：保证行数据的唯一标识正确
• return-object：与single-select配合，返回选中的完整对象（若不需要可移除，但需保持配置一致）
• show-select：保留以显示行选择框

修正后的完整组件代码 #

<v-data-table
  v-if="makeDevicelist"
  :headers="makeHeaders"
  :items="makeDevicelist"
  :items-per-page="10"
  :item-class="itemRowBackground"
  :items-per-page-options="itemsPerPageOptions"
  items-per-page-text="表示件数:"
  :single-select="true"
  item-key="deviceId"
  show-select
  v-model="selectedItems"
  @click:row="OnClick"
  class="elevation-0 mb-10"
  :footer-props="footerProps"
  @pagination="paginate"
  :loading="isGettingDeviceLists"
  @update:options="updateOptions"
  return-object
>
  <template v-slot:top="{ pagination, options, updateOptions }">
    <v-data-table-footer
      :pagination="pagination"
      :options="options"
      @update:options="updateOptions"
      :items-per-page-text="itemsPerPageText"
      :items-per-page-options="itemsPerPageOptions"
      :show-first-last-page="true"
      id="d-table-header"
    >
    </v-data-table-footer>
  </template>

  <!-- 隐藏全选复选框 -->
  <template v-slot:[`header.data-table-select`]></template>

  <template v-slot:[`item.icon`]="{ item }">
    <td><v-img :src="selectIcon(item)" contain width="50px"></v-img></td>
  </template>
  <template v-slot:[`item.deviceName`]="{ item }">
    <td :style="switchNameStyle(item)">{{ item.deviceAndUserNameStr }}</td>
  </template>
  <template v-slot:[`item.cocoroOfficeId`]="{ item }">
    <td :style="switchNameStyle(item)">{{ item.cocoroOfficeId }}</td>
  </template>
  <template v-slot:[`item.lastAccessTimeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.lastAccessTimeString }}</td>
  </template>
  <template v-slot:[`item.backupSizeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.backupSizeString }}</td>
  </template>
  <template v-slot:[`item.localUpdateTimeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.localUpdateTimeString }}</td>
  </template>
</v-data-table>

额外注意事项 #

• 若使用Vuetify版本低于v2.6，建议升级到稳定版本以避免兼容性问题。
• 不要手动将selectedItems改为数组类型，保持单个对象格式，组件会自动处理单选逻辑。

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