在 Vuetify 数据表中选择行 [英] Select rows in Vuetify Data Table

问题描述

我想知道如何通过单击 Vuetify 中数据表中的一行来选择/取消选择一行.如果我可以使用 shift+click 或 shift+arrows 选择一个范围会更好，但这是另一个问题.

I was wondering how can I select/unselect a row by clicking a row in a datatable in Vuetify. It would be even better if I could select a range by using shift+click or shift+arrows but that is another question.

我尝试更新我发送到参数value"中的数组，但从未在 ui 中选择行.

I have tried to update the array I send into the parameter "value" but the rows never get selected in the ui.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="id"
    class="elevation-1"
    :value="selectedRows"
    @click:row="rowClicked"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      selectedRows: [],
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" }
      ],
      desserts: [
        {
          id: 1,
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
        },
        {
          id: 2,
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%"
        },
        {
          id: 3,
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: "7%"
        },
        {
          id: 4,
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: "8%"
        },
        {
          id: 5,
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: "16%"
        },
        {
          id: 6,
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: "0%"
        },
        {
          id: 7,
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: "2%"
        },
        {
          id: 8,
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: "45%"
        },
        {
          id: 9,
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: "22%"
        },
        {
          id: 10,
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: "6%"
        }
      ]
    };
  },
  methods: {
    rowClicked(row) {
      this.swapSelectionStatus(row.id);
      this.log(row);
    },
    swapSelectionStatus(keyID) {
      if (this.selectedRows.includes(keyID)) {
        this.selectedRows = this.selectedRows.filter(
          selectedKeyID => selectedKeyID !== keyID
        );
      } else {
        this.selectedRows.push(keyID);
      }
    },
    select(e) {
      this.log(e);
    },
    log(logItem) {
      /* eslint-disable no-console */
      console.log(logItem);
    }
  }
};
</script>

推荐答案

我想你想用 v-model 代替...

I think you want to use v-model instead...

<v-data-table
    :headers="headers"
    :items="desserts"
    item-key="id"
    v-model="selectedRows"
    class="elevation-1">
      <template v-slot:item="{ item }">
        <tr :class="selectedRows.indexOf(item.id)>-1?'cyan':''" @click="rowClicked(item)">
            <td>{{item.name}}</td>
            <td>{{item.calories}}</td>
            <td>{{item.fat}}</td>
            <td>{{item.carbs}}</td>
            <td>{{item.protein}}</td>
            <td>{{item.iron}}</td>
        </tr>
    </template>
</v-data-table>

演示

您还可以使用 Vuetify 数据表 select 功能来切换所选行.这比使用自定义方法来处理选择逻辑更容易.

You can also the Vuetify Data Table select function to toggle the selected rows. This is easier than having custom methods to handle the selection logic.

演示 2

这篇关于在 Vuetify 数据表中选择行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！