检测用户何时在 v-data-table 中选择复选标记答案

【问题标题】：Detect when a user selects checkmark in v-data-table检测用户何时在 v-data-table 中选择复选标记
【发布时间】：2020-01-08 10:05:40
【问题描述】：

当用户选中/取消选中 v-data-table 中的框时，是否会发出事件？如果没有，是否有合适的地方我应该添加一个@click 事件（可能在 item.data-table-select 和 header.data-table-select 的模板 v-slot 激活器中？）

<v-data-table show-select ...>

作为下面链接中显示的表格中的示例，如果我单击“纸杯蛋糕”行上的复选框，则该行将被选中。我现在想通知其他组件这已经发生了。

https://vuetifyjs.com/en/components/data-tables#selectable-rows

【问题讨论】：

标签： vuetify.js

【解决方案1】：

我认为您正在寻找 :item-selected 事件。

【讨论】：

这很好用，但是当有人点击“全选”复选标记时它不会触发。

【解决方案2】：

在 vuetify 2 中：props 属性不再适用。因此，您必须以自己的方式进行设备，在我的情况下，我使用array.includes(myCurrentItem)检查给定项目是否在所选项目的数组中

例如

<v-data-table
    v-model="selectedItems"
    :headers="headers"
    :items="items"
    show-select
  >
  <template v-slot:item.actions="{ item }">
    <v-btn :disabled="selectedItems.includes(item)"
  </template>
</v-data-table>

在 vuetify 1.5: 中，您可以在项目本身上使用：item.selected 属性，例如

<v-data-table
    v-model="selectedItems"
    :headers="headers"
    :items="items"
    select-all
    v-bind:pagination.sync="pagination"
    item-key="name"
    class="elevation-1"
  >
  <template slot="items" scope="props">
    <tr :active="props.selected" @click="props.selected = !props.selected">
      <td>
        <v-checkbox
          primary
          hide-details
          :input-value="props.selected"
        ></v-checkbox>
      </td>
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">
           <v-btn :disabled="!item.selected">button</v-btn>
      </td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
    </tr>
  </template>
</v-data-table>

【讨论】：