當使用 v-slot:body 和 v-checkbox 進行行選擇時，與沒有任何 v-slot:body 的 v-data-table 相比，我得到了一個意想不到的行為。當“items”物件更改時，v-slot:body 中的所有復選框都被“選中”。
與我的 v-checkbox 和沒有 v-slot:body 的 v-data-table 使用的 v-checkbox 有什么不同？有沒有辦法在仍然使用主體插槽的同時解決這個問題？
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
show-select
dense
hide-default-footer
class="elevation-1"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="d in items" :key="d.name">
<td>
<v-checkbox
v-model="selected"
:value="d"
style="margin:0px;padding:0px"
hide-details>
</v-checkbox>
</td>
<td>{{ d.name }}</td>
<td>{{ d.calories }}</td>
</tr>
</tbody>
</template>
</v-data-table>
復制：
而不是單獨的item插槽。在 body 的 slot 中，您需要將 item 傳遞給這些函式。因此，為了與您的v-checkbox. 以這種方式配置它們。我們開始洗掉v-model您使用的值，因為它由資料表管理。然后我們將d您在您的專案中定義的專案傳遞v-for給選擇函式。
<v-checkbox
:input-value="isSelected(d)"
style="margin:0px;padding:0px"
color="#535353"
hide-details
@click="select(d,!isSelected(d))"
>
</v-checkbox>
這是您的示例代碼筆正常作業：https ://codepen.io/cmfc31/pen/VwMvYpy?editors = 1010
uj5u.com熱心網友回復：
您忘記將v-checkbox輸入定義為多個，以允許相應地處理系結模型。
<v-checkbox
v-model="selected"
multiple
:value="d"
style="margin:0px;padding:0px"
hide-details></v-checkbox>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372765.html
上一篇：404在nuxt中找不到svg