Как получить выбранные строки из таблицы v-data? (Vuetify) - PullRequest
Новая
       28

Как получить выбранные строки из таблицы v-data? (Vuetify)

1 голос
/ 19 апреля 2020

Я использую v-data-table с опцией «show-select», которая показывает флажки за каждой строкой, но я понятия не имею, как на самом деле узнать, какие строки проверяются и получить их значения ...

Это код 

<v-data-table
   :headers="TopicHeaders"
   :items="allTopics"
   :search="searchTopics"
   show-select
   class="elevation-1"
   item-key="name"
></v-data-table>

Спасибо

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Выбранные строки привязаны к значению (v-model) таблицы данных. Это должно быть так просто, как ... 

<v-data-table
   v-model="selected"
   :headers="TopicHeaders"
   :items="allTopics"
   :search="searchTopics"
   show-select
   class="elevation-1"
   item-key="name"
></v-data-table>

Теперь проверенные строки хранятся в массиве selected. См. Мой ответ здесь для примеров того, как манипулировать строками selected при использовании пользовательских слотов.

0 голосов
/ 19 апреля 2020

Они также дали ваш ответ .

. show-select prop отобразит флажок в заголовке по умолчанию для переключения всех строк и флажок для каждого строка по умолчанию.

Вы можете настроить , используя slots header.data-table-select и item.data-table-select соответственно.

slots делает это.

Каждый элемент в row указывает на это. Вы сможете получить доступ к этому через item.data-table-select

Например: 

<template v-slot:top="t">
   {{ t.items[0].name }}
</template>

Вы сможете получить доступ к каждому элементу строки, как это. Поэтому постарайтесь получить четкое представление о slot

Редактировать на основе вашего комментария:

Если вы хотите передать строку данных, следуйте этому коду. Я думаю, это поможет вам. 

<template v-slot:item.actions="{ item }">
  <v-button
     @click="editItem(item)"
  > Edit
  </v-button>
</template>

<script>
methods: {
   editItem (item) {
      console.log(item)
   }
}
</script>

Если вы хотите поместить какие-либо данные из таблицы в другую переменную, используйте method, как указано выше.

...