自动选择数据表中的行

Question

我想在外部侦听器通知我特定值时以编程方式选中 v-data 表中的一行。

举个例子，下面是一个Vuetify可选表：https://vuetifyjs.com/en/components/data-tables#selectable-rows

在示例中，如果在表及其数据已实例化后传递"姜饼"的值，我将如何以编程方式选择相应的行？

Answer 1

您可以通过在模型中推送值来做到这一点，如下所示：

.HTML：

<div id="app">
<v-app id="inspire">
<v-btn @click="select">button</v-btn>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
</template>
</v-data-table>
</v-app>
</div>

VueJS：

new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
select: function() {
let result = this.desserts.find((dessert) => {
return dessert.name == 'Gingerbread'
})
this.selected.push(result)
}
},
data () {
return {
singleSelect: false,
selected: [],
headers: [
{ text: 'Dessert (100g serving)', value: 'name' },  
{ text: 'Calories', value: 'calories' },
],
desserts: [
{ name: 'Gingerbread', calories: 356 },
{ name: 'Jelly bean', calories: 375 }
],
}
},
})

Answer 2

v-data-table 组件具有一个名为 filteredItems 的属性，您可以使用该属性将项目添加到所选数组

<v-data-table v-model="selected":items="itemsArray" ref="table"></v-data-table>
function selectAll() {
this.$refs.table.filteredItems.map(item => {
if(...some condition...) {
this.selected.push(item)
}
})
}