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