我想知道在Vuetify中如何通过单击数据表格中的一行来选择/取消选择一行。如果能够使用shift + click或shift + arrows选择范围,那就更好了,但这是另一个问题。
我尝试更新发送到"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>