Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

v-data-table checkbox selection in vue js 3

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,

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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>

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading