0

当使用带有 v-checkbox 的 v-slot:body 进行行选择时，与没有任何 v-slot:body 的 v-data-table 相比，我得到了一个意外的行为。当“items”对象改变时，所有的复选框都在 v-slot:body 中被“选中”。

我的 v-checkbox 和没有 v-slot:body 的 v-data-table 使用的那个有什么不同？有没有办法在仍然使用主体插槽的同时解决这个问题？

<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

4

2 回答 2

0

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

<v-checkbox
  v-model="selected"
  multiple
  :value="d" 
  style="margin:0px;padding:0px"
  hide-details></v-checkbox>
于 2021-12-03T15:53:32.203 回答
0

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

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

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

身体插槽预览

而不是单独的item插槽。在 body 的插槽中，您需要将项目传递给这些函数。因此，为了与您的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

于 2021-12-03T16:15:30.820 回答