时间戳

首页 > 解决方案 > 自动选择 v-data-table 中的行

vuetify.js - 自动选择 v-data-table 中的行

问题描述

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

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

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

标签： vuetify.js

解决方案

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

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

推荐阅读