自动选择 v-data-table 中的行答案

【问题标题】：Auto select rows in v-data-table自动选择 v-data-table 中的行
【发布时间】：2019-09-04 19:22:32
【问题描述】：

当外部侦听器通知我特定值时，我想以编程方式检查 v-data-table 中的一行。

例如，这里有一个 Vuetify 可选表：https://vuetifyjs.com/en/components/data-tables#selectable-rows

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

【问题讨论】：

标签： vuetify.js

【解决方案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 }
      ],
    }
  },
})

【讨论】：

我也有一个 codepen 顺便说一句：codepen.io/reijnemans/pen/qBWVyrO?editors=1010

【解决方案2】：

v-data-table 组件有一个名为 filtersItems 的属性，您可以使用它来将项目添加到选定的数组中

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

【讨论】：