So implementieren Sie das Hinzufügen, Löschen, Ändern und Abfragen von Daten in Vue und kombinieren diese mit Dialogfeldern

In den letzten Jahren hat sich Vue mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie zum von immer mehr Entwicklern gewählten Front-End-Framework entwickelt. Unter ihnen ist das Hinzufügen, Löschen, Ändern und Abfragen von Front-End-Daten eine der grundlegendsten Funktionen in Webanwendungen. Wie kann man in Vue hinzufügen, löschen, ändern und überprüfen, während ein Dialogfeld geöffnet wird? Als Nächstes erfahren Sie in diesem Artikel, wie Sie Daten in Vue hinzufügen, löschen, ändern und abfragen und wie Sie Dialogfelder kombinieren, um die Benutzerinteraktivität zu verbessern.

1. Vorbereitung

Bevor wir Vue üben, müssen wir die folgenden Technologien verstehen und beherrschen:

1. Grundkenntnisse von Vue: einschließlich Komponenten, Datenbindung, Methoden, Lebenszyklen und anderen verwandten Inhalten;
2. Element-Benutzeroberfläche: A UI-Komponentenbibliothek basierend auf Vue2.0, die einen umfangreichen Satz an UI-Komponenten bereitstellt, einschließlich Tabellen, Dialogfeldern, Dropdown-Boxen usw.;
3. Webpack: ein moderner Ressourcenmanager, der mehrere JavaScript-Dateien in einer Datei kombinieren kann Ladezeiten verkürzen.

2. Implementierung von Add-, Lösch-, Änderungs- und Prüfvorgängen

1. Dateninitialisierung

In Vue verwenden wir die Datenoption, um Daten zu definieren. Definieren Sie zunächst ein Datenobjekt in der Vue-Instanz und fügen Sie darin Variablen zum Speichern von Daten hinzu. Nehmen Sie als Beispiel eine einfache Tabelle wie folgt:

<template>
  <div>
    <el-table :data="tableData">
      ...
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

2. Implementieren Sie die Operation zum Hinzufügen von Daten.

Die Implementierung des Hinzufügens von Daten in Vue erfordert die Verwendung der V-Modell-Anweisung. Die Funktion dieser Anweisung besteht darin, die zu kombinieren Daten der Formularelemente mit der Vue-Instanz. Wenn sich der Wert des Formulars ändert, werden auch die entsprechenden Daten aktualisiert. Wenn wir beispielsweise ein Datenelement zur Tabelle hinzufügen, können wir dies über den folgenden Code tun:

<el-form>
  <el-form-item label="Name">
    <el-input v-model="name"></el-input>
  </el-form-item>
  <el-form-item label="Age">
    <el-input v-model="age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="addData">Add Data</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        tableData: [],
        name: '',
        age: ''
      }
    },
    methods: {
      addData() {
        this.tableData.push({name: this.name, age: this.age})
        this.name = ''
        this.age = ''
      }
    }
  }
</script>

3. Implementieren Sie den Datenlöschvorgang.

Der Datenlöschvorgang in Vue ist ein sehr häufiger Vorgang, und das Löschen ist ein sehr häufiger Vorgang Dies wird durch Klicken auf eine Schaltfläche oder einen Link erreicht. In Vue können Sie die v-for-Anweisung verwenden, um Tabellendaten zu iterieren und die entsprechende Löschfunktion über Ereignisse aufzurufen. Das Folgende ist die Code-Implementierung zum Löschen von Daten:

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button type="danger" @click="deleteData(scope.$index)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      deleteData(index) {
        this.tableData.splice(index, 1)
      }
    }
  }
</script>

4. Implementieren des Datenbearbeitungsvorgangs

In Vue muss der Datenbearbeitungsvorgang in zwei Schritte unterteilt werden: Einer besteht darin, die bearbeiteten Daten im Formular anzuzeigen, und der andere darin Die andere besteht darin, die geänderten Daten anzuzeigen. Die Daten werden an den Server übermittelt. Sie können die bearbeiteten Daten im Formular über die V-Modell-Anweisung anzeigen und dann die geänderten Daten durch Absenden des Formulars senden. Das Folgende ist die Code-Implementierung zum Bearbeiten von Daten:

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button @click="editData(scope.row)">Edit</el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        const index = this.tableData.indexOf(this.editRow)
        Object.assign(this.tableData[index], this.editRow)
        this.dialogVisible = false
      }
    }
  }
</script>

3. Kombiniert mit Dialogfeldern, um interaktive Effekte zu erzielen

Die Element-UI-Komponentenbibliothek in Vue bietet einen umfangreichen Satz von Komponenten, einschließlich Dialogkomponenten, mit denen sich Popups problemlos implementieren lassen Wirkung von Dialogfeldern. In Vue erfordert die Implementierung der Dialogkomponente die Einführung der Element-UI-Komponentenbibliothek. Das Folgende ist die Codeimplementierung der Dialogkomponente:

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">Edit Data</span>
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        ...
        this.dialogVisible = false
      }
    }
  }
</script>

4. Fazit

In diesem Artikel wird hauptsächlich die Methode zur Implementierung grundlegender Funktionen vorgestellt Hinzufügen, Löschen, Ändern und Suchen in Vue Gleichzeitig wird die Dialogkomponente kombiniert, um die Benutzerinteraktivität zu verbessern. Es ist zu beachten, dass wir in der tatsächlichen Entwicklung je nach Bedarf entsprechende Änderungen und Verbesserungen vornehmen müssen. Während der Verwendung müssen wir auf die Effizienz und Lesbarkeit des Codes sowie auf die Trennung von Code und HTML und andere damit verbundene Probleme achten.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Hinzufügen, Löschen, Ändern und Abfragen von Daten in Vue und kombinieren diese mit Dialogfeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!