vue js 3 中的 v-data-table 复选框选择

Question

如何制作v-data-table，一次只能选择一个复选框，而不能多选

我已经尝试过对 v-data-table 使用单选以及 :single-select="true" 属性，但可以选择多个复选框，并且我已禁用全选复选框。

我尝试修改的代码如下所示，

<v-data-table
  v-if="makeDevicelist"
  :headers="makeHeaders"
  :items="makeDevicelist"
  :items-per-page="10"
  :item-class="itemRowBackground"
  :key="makeDevicelist.deviceId"
  :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>

  <!-- for removing select all checkbox from device list -->
  <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>

Answer 1

检查可选行。
您需要添加

select-strategy="single"

以支持只能选择单行。

<v-data-table
    :headers="headers"
    :items="desserts"
    item-value="name"
    select-strategy="single"
    show-select
></v-data-table>