So erhalten Sie den Wert einer benutzerdefinierten Tabelle vue

So erhalten Sie den Wert eines benutzerdefinierten Tabellen-Vue

In Vue.js wird die Tabelle mithilfe der v-for-Anweisungsschleife gerendert. Sobald benutzerdefinierte Daten in einer Tabelle vorhanden sind (z. B. Dropdown-Listenfelder, Optionsfelder, Kontrollkästchen usw.), benötigen Sie eine bequeme Möglichkeit, die Werte dieser benutzerdefinierten Daten aus der Tabelle abzurufen. In diesem Artikel stellen wir vor, wie man den Wert einer benutzerdefinierten Tabelle in Vue.js erhält.

Zunächst müssen wir den Lebenszyklus von Vue.js-Komponenten verstehen, da benutzerdefinierte Tabellen normalerweise eine Komponente enthalten. Die Vue.js-Komponente verfügt über 9 Lebenszyklusfunktionen:

beforeCreate, erstellt, beforeMount, gemountet, beforeUpdate, aktualisiert, beforeDestroy, zerstört, errorCaptured

Unter ihnen: Wir verwenden zwei erstellte und bereitgestellte Lebenszyklusfunktionen, um den Wert der benutzerdefinierten Tabelle zu implementieren.

1. In der erstellten Lebenszyklusfunktion müssen wir das Datenmodell der Tabelle definieren, einschließlich Tabellenköpfe und Tabellenzeilen. Der folgende Code implementiert ein Tabellendatenmodell, einschließlich Tabellenköpfen und Tabellenzeilen.

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. In der montierten Lebenszyklusfunktion müssen wir eine Funktion erstellen, um den Wert in der benutzerdefinierten Tabelle abzurufen. Verwenden Sie das $refs-Attribut von Vue.js, um auf DOM-Elemente in der Tabelle zu verweisen und Werte von DOM-Elementen abzurufen. Der folgende Code implementiert eine Funktion zum Abrufen benutzerdefinierter Datenwerte in der Tabelle:

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

In diesem Code rufen wir die Funktion $refs.table.getSelectedItems() auf, um die ausgewählten Werte abzurufen Datenelemente. Anschließend verwenden wir eine for-Schleife, um die ausgewählten Datenelemente zu durchlaufen, ihre Hobby-Eigenschaftswerte zum Array selectedValues ​​hinzuzufügen und schließlich das Array zurückzugeben.

3. Fügen Sie abschließend die benutzerdefinierten Daten zur Tabelle hinzu und stellen Sie sicher, dass Sie das ref-Attribut zu den DOM-Elementen der benutzerdefinierten Spalten hinzufügen, damit sie mithilfe des $refs-Attributs referenziert werden können. Der folgende Code zeigt, wie Sie einer Tabelle benutzerdefinierte Daten hinzufügen und auf DOM-Elemente verweisen.

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

In diesem Beispiel verwenden wir die V-Select-Komponente als benutzerdefinierte Daten. Um auf ein DOM-Element zu verweisen, müssen Sie das ref-Attribut zum v-select-Element hinzufügen. Wir haben auch gezeigt, wie man der Tabelle eine V-Select-Spalte hinzufügt. Schließlich haben wir dem v-select-Element eine v-model-Direktive hinzugefügt, damit die Auswahl des Benutzers in beide Richtungen gebunden werden kann.

Zusammenfassung

Benutzerdefinierte Tabellen in Vue.js können uns mehr Flexibilität bieten, um mehr Daten und Informationen darzustellen und zu verarbeiten. Mithilfe der Funktionen von Vue.js können wir problemlos Daten aus benutzerdefinierten Tabellen abrufen und verarbeiten. In diesem Artikel verwenden wir die beiden erstellten und bereitgestellten Lebenszyklusfunktionen, um den Wert der benutzerdefinierten Tabelle zu erhalten. Wir haben auch erläutert, wie Sie das Attribut $refs verwenden, um auf DOM-Elemente zu verweisen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Wert einer benutzerdefinierten Tabelle vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!