v-data-table checkbox selection in vue js 3

Question

How to make the v-data-table where only one checkbox can be selected at a time and not multiple selection

I have tried single-select as well as :single-select="true" props for the v-data-table but more than one checkbox can be selected and I have disabled the select-all checkbox.

The code which I am trying to modify is given below,

<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

Check selectable-rows.
You need to add select-strategy="single" to support only a single row can be selected.

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