如何制作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>
检查可选行。
您需要添加
select-strategy="single"
以支持只能选择单行。
<v-data-table
:headers="headers"
:items="desserts"
item-value="name"
select-strategy="single"
show-select
></v-data-table>