Comment obtenir la valeur d'une vue de table personnalisée

Comment obtenir la valeur d'une table personnalisée dans Vue

Dans Vue.js, la table est rendue à l'aide de la boucle d'instruction v-for. Une fois que des données personnalisées existent dans un tableau (telles que des zones de liste déroulante, des boutons radio, des cases à cocher, etc.), vous avez besoin d'un moyen pratique pour obtenir les valeurs de ces données personnalisées à partir du tableau. Dans cet article, nous expliquerons comment obtenir la valeur d'une table personnalisée dans Vue.js.

Tout d'abord, nous devons comprendre le cycle de vie des composants Vue.js, car les tables personnalisées contiennent généralement un composant. Le composant Vue.js possède 9 fonctions de cycle de vie, qui sont :

beforeCreate,created, beforeMount, Mounted, beforeUpdate,mis à jour, beforeDestroy, destroy, errorCaptured

Parmi elles, nous utiliserons les deux fonctions de cycle de vie créées et montées pour implémentez des valeurs de table personnalisées.

1. Dans la fonction de cycle de vie créée, nous devons définir le modèle de données de la table, y compris les en-têtes et les lignes du tableau. Le code suivant implémente un modèle de données de table, comprenant des en-têtes de table et des lignes de table.

created() {
  this.headers = [
    { text: 'Name', value: 'name' },
    { text: 'Age', value: 'age' },
    { text: 'Gender', value: 'gender' },
    { text: 'Hobby', value: 'hobby' }
  ]
  this.items = [
    { name: 'John', age: 25, gender: 'Male', hobby: 'Basketball' },
    { name: 'Mary', age: 30, gender: 'Female', hobby: 'Singing' },
    { name: 'David', age: 28, gender: 'Male', hobby: 'Dancing' },
    { name: 'Rachel', age: 22, gender: 'Female', hobby: 'Reading' }
  ]
}

2. Dans la fonction de cycle de vie montée, nous devons créer une fonction pour obtenir la valeur dans la table personnalisée. Utilisez l'attribut $refs de Vue.js pour référencer les éléments DOM dans le tableau et obtenir les valeurs des éléments DOM. Le code suivant implémente une fonction pour obtenir des valeurs de données personnalisées dans le tableau :

mounted() {
  this.getSelectedValues = function() {
    let items = this.$refs.table.getSelectedItems()
    let selectedValues = []
    for (let item of items) {
      selectedValues.push(item.hobby)
    }
    return selectedValues
  }
}

Dans ce code, nous appelons la fonction $refs.table.getSelectedItems() pour obtenir les éléments de données sélectionnés. Nous utilisons ensuite une boucle for pour parcourir les éléments de données sélectionnés et ajouter leurs valeurs de propriété de passe-temps au tableau selectedValues, et enfin renvoyer le tableau.

3. Enfin, ajoutez les données personnalisées dans le tableau et assurez-vous d'ajouter l'attribut ref dans les éléments DOM des colonnes personnalisées afin qu'elles puissent être référencées à l'aide de l'attribut $refs. Le code suivant montre comment ajouter des données personnalisées et référencer des éléments DOM à une table.

<v-data-table :headers="headers" :items="items" ref="table">
  <template v-slot:item.hobby="{ item }">
    <v-select v-model="item.hobby" :items="hobbies" ref="hobby" label="Hobby"></v-select>
  </template>
  <template v-slot:body>
    <tbody>
      <tr v-for="(item, index) in items" :key="index" v-bind:style="[ index % 2 == 0 ? { background: '#f2f2f2' } : {} ]">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td><v-select v-model="item.hobby" :items="hobbies" label="Hobby"></v-select></td>
      </tr>
    </tbody>
  </template>
</v-data-table>

Dans cet exemple, nous avons utilisé le composant v-select comme données personnalisées. Pour référencer un élément DOM, vous devez ajouter l'attribut ref à l'élément v-select. Nous avons également montré comment ajouter une colonne v-select au tableau. Enfin, nous avons ajouté une directive v-model à l'élément v-select afin que la sélection de l'utilisateur puisse être liée dans les deux sens.

Résumé

Les tableaux personnalisés dans Vue.js peuvent nous donner plus de flexibilité pour présenter et traiter plus de données et d'informations. Grâce aux fonctionnalités de Vue.js, nous pouvons facilement obtenir et traiter les données de tables personnalisées. Dans cet article, nous utilisons les deux fonctions de cycle de vie créées et montées pour obtenir la valeur de la table personnalisée. Nous avons également expliqué comment utiliser l'attribut $refs pour référencer des éléments DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!