使用 v-slot:body 和 v-checkbox 行选择器

Question

当使用 v-slot:body 和 v-checkbox 进行行选择时，与没有任何 v-slot 的 v-data-table 相比，我得到了意想不到的行为:body。当“项目”object 更改时，v-slot:body.

中的所有复选框都被“选中”

我的v-checkbox和没有v-slot的v-data-table使用的有什么不同：body？有没有办法在仍然使用 body 插槽的情况下解决此问题？

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

复制： https://codepen.io/Straktor/pen/gOGpoqJ

Answer 1

您忘记将 v-checkbox 输入定义为多个，以允许相应地处理绑定模型。

<v-checkbox
  v-model="selected"
  multiple
  :value="d" 
  style="margin:0px;padding:0px"
  hide-details></v-checkbox>

Answer 2

首先从 body 插槽中获取 isSelected 和 select 函数。

<template v-slot:body="{ items, isSelected, select}">

如果你查看 vuetify 的 v-data-table API 插槽部分，你会注意到 body 插槽包含 isSelected 和 select 方法。 https://vuetifyjs.com/en/api/v-data-table/#slots

而不是单个 item 插槽。在 body 的插槽中，您需要将项目传递给这些功能。所以，为了和你的v-checkbox一起工作。以这种方式配置它们。我们开始删除您使用的 v-model 值，因为它由数据 table 管理。然后我们将您在 v-for 中定义的项目 d 传递给 selection 函数。

<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

使用 v-slot:body 和 v-checkbox 行选择器

Using v-slot:body with v-checkbox row selector

vue.js

vuetify.js

v-data-table