web-dev-qa-db-fra.com

Comment extraire des données d'une ligne sélectionnée Vuetify Datatable

J'ai un Vuetify Datatable

             <v-data-table
                :headers="headers"
                :items="members"
                item-key="id"
                v-model="selected"
                :search="search"
              >
                <template slot="items" slot-scope="props">
                  <tr :active="props.selected" @click="select(props.item)">
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.FirstName}}</td>
                    <td class="text-xs-right">{{ props.item.LastName }}</td>
                    <td class="text-xs-right">{{ props.item.email }}</td>
                    <td class="text-xs-right">{{ props.item.department}}</td>
                    <td class="text-xs-right">{{ props.item.division}}</td>
                  </tr>
                </template>

Et lorsque je sélectionne une ligne, je veux pouvoir remplir un élément sur la même page avec certaines des données telles que le nom et l'e-mail dans une v-card. J'ai actuellement {{msg}}

et dans mon script j'ai

         return {
         msg: "",

puis

       select(selectedItem) {
  this.selected = [];
  this.members.forEach(item => {
    if (item.id == selectedItem.id) {
      this.selected.Push(item);
      this.msg = selectedItem.FirstName;
    }
  });
},

J'ai besoin de mettre un nom dans le msg. Je sens que je fais le long chemin pour obtenir mes données et je me demandais si quelqu'un avait une meilleure solution. Merci pour le soutien.

vue.jsvuetify.js
2
user1314159

Puisqu'il existe une liaison entre la table de données et this.selected, il vous suffit de remplir msg en tant que propriété calculée du composant. Vous n'avez pas besoin d'ajouter manuellement à this.selected en écoutant l'événement click.

computed: {
  msg() {
    const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
  }
}

ÉDITER

J'ai ajouté un exemple minimal. Remarque pour l'accessoire clé-élément de v-data-table, vous devez utiliser des valeurs uniques.

<template>
<v-card>
  <v-card-text>
    <v-data-table :headers="headers" :items="members" v-model="selected" item-key="id">
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            :disabled="!props.selected && selected.length != 0"
            :indeterminate="!props.selected && selected.length != 0"
          ></v-checkbox>
        </td>
        <td>{{ props.item.firstName}}</td>
        <td>{{ props.item.lastName }}</td>
      </template>
    </v-data-table>
  {{ msg }}
  </v-card-text>
</v-card>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: "Select", value: "id", sortable: false },
        { text: "First Name", value: "firstName", sortable: true },
        { text: "Last Name", value: "lastName", sortable: true }
      ],
      selected: [],
      members: [
        {
          id: 1,
          firstName: "a",
          lastName: "b"
        },
        {
          id: 2,
          firstName: "x",
          lastName: "y"
        }
      ]
    };
  },

  computed: {
    msg() {
      const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
    }
  }
};
</script>
2
Keqiang Li
<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item  - selected item
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

ou

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

Exemple https://codepen.io/nicolai-nikolai/pen/GRgLpNY

2
Nicolai Nikolai