Vue.js 在Vuetify数据表中选择行

我想知道如何通过在Vuetify中单击datatable中的一行来选择/取消选择一行。如果我可以使用shift+单击或shift+箭头选择一个范围会更好，但这是另一个问题

我试图更新发送到参数“value”中的数组，但在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>

导出默认值{
数据（）{
返回{
选定：[]，
选定的箭头：[]，
标题：[
{
正文：“甜点（100克食用）”，
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：“卡路里”，值：“卡路里”}，
{文本：“Fat（g）”，值：“Fat”}，
{文本：“Carbs（g）”，值：“Carbs”}，
{文本：“蛋白质（g）”，值：“蛋白质”}，
{文本：“铁（%）”，值：“铁”}
],
甜点：[
{
id:1，
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：“1%。”
},
{
id:2，
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3，
铁：“1%。”
},
{
id:3，
名称：“Eclair”，
卡路里：262，
脂肪：16.0，
碳水化合物：23，
蛋白质：6.0，
铁：“7%。”
},
{
id:4，
名称：“纸杯蛋糕”，
卡路里：305，
脂肪：3.7，
碳水化合物：67，
蛋白质：4.3，
铁：“8%。”
},
{
id:5，
名称：“姜饼”，
卡路里：356，
脂肪：16.0，
碳水化合物：49，
蛋白质：3.9，
铁：“16%。”
},
{
id:6，
名称：“果冻豆”，
卡路里：375，
脂肪：0.0，
碳水化合物：94，
蛋白质：0.0，
铁：“0%。”
},
{
id:7，
名称：“棒棒糖”，
卡路里：392，
脂肪：0.2，
碳水化合物：98，
蛋白质：0，
铁：“2%。”
},
{
id:8，
名称：“蜂巢”，
卡路里：408，
fat:3.2，
碳水化合物：87，
蛋白质：6.5，
铁：“45%。”
},
{
id:9，
名称：“甜甜圈”，
卡路里：452，
脂肪：25.0，
碳水化合物：51，
蛋白质：4.9，
铁：“22%。”
},
{
id:10，
姓名：“KitKat”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
蛋白质：7，
铁：“6%。”
}
]
};
},
方法：{
行（行）{
此.swapSelectionStatus（row.id）；
此.log（行）；
},
交换选择状态（密钥ID）{
if（this.selectedRows.includes（keyID））{
this.selectedRows=this.selectedRows.filter(
selectedKeyID=>selectedKeyID！==keyID
);
}否则{
此.selectedRows.push（keyID）；
}
},
选择（e）{
这是log（e）；
},
日志（logItem）{
/*eslint禁用无控制台*/
console.log（logItem）；
}
}
};

我想你应该用

v型车来代替

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


{{item.name}
{{item.carries}
{{item.fat}
{{item.carbs}
{{item.protein}}
{{item.iron}



您还可以使用Vuetify Data Table
select
功能切换所选行。这比使用自定义方法处理选择逻辑更容易

这样做会很好

<v-data-table
 :headers="getHeaders"
 :items="fetchDisplayData"
 :search="search"
 flat
 class="elevation-0"
 justify="space-around"
 item-key="user_id"
 v-model="selected"
 show-select
 >
</v-data-table>

data(){
  return {
    selected:[{user_id: "FOR_INSTANCE"}]
  }
}