Wie bearbeite und storniere ich Tabellen in Vue?

Wie bearbeite und storniere ich Tische in Vue?

In der Vue-Entwicklung ist es oft notwendig, Tabellen zu bearbeiten und zu ändern, daher ist es besonders wichtig, Tabellen zu bearbeiten und zu löschen. In diesem Artikel erfahren Sie, wie Sie Tabellen in Vue bearbeiten und stornieren.

1. Bindung von Tabellendaten

In der Tabelle müssen wir zuerst die Daten in die Tabelle rendern, daher müssen die Daten gebunden werden. In Vue können Datendurchlauf und -rendering mithilfe der v-for-Direktive erreicht werden.

Definieren Sie beispielsweise Beispieldaten in Daten wie folgt:

data() {
  return {
    tableData: [
      {name: '张三', age: 20},
      {name: '李四', age: 22},
      {name: '王五', age: 25},
    ],
    editIndex: -1,
  }
}

Darunter ist ein tableData-Array definiert, das drei Objekte speichert, wobei jedes Objekt eine Datenzeile in der Tabelle darstellt. editIndex stellt die Tabellenzeile dar, die gerade bearbeitet wird, und der Anfangswert ist -1, was den unbearbeiteten Zustand angibt.

In der Tabelle können Sie den folgenden Code zum Rendern von Daten verwenden:

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>
      <button @click="editRow(index)">编辑</button>
    </td>
  </tr>
</table>

Im obigen Code verwenden Sie die v-for-Anweisung, um die Daten im tableData-Array zu durchlaufen, und verwenden Sie das :key-Attribut, um die Eindeutigkeit anzugeben Bezeichner jedes Elements. Gleichzeitig verfügt jede Zeile in der Tabelle über eine Schaltfläche „Bearbeiten“. Durch Klicken auf diese Schaltfläche wird die aktuelle Zeile in den Bearbeitungsstatus versetzt.

2. Ändern des Bearbeitungsstatus der Tabelle

In Vue können Sie den Index der aktuell bearbeiteten Zeile aufzeichnen, indem Sie eine editIndex-Variable definieren. Wenn der Benutzer auf die Schaltfläche „Bearbeiten“ klickt, wird der Index der Zeile, in der sich die Schaltfläche befindet, auf den Wert von editIndex gesetzt und die Daten in der Zeile in der Tabelle werden in einem bearbeitbaren Zustand angezeigt. Wenn der Benutzer auf die Schaltfläche „Speichern“ oder „Abbrechen“ klickt, wird der Wert von editIndex auf -1 zurückgesetzt, was anzeigt, dass derzeit keine Zeilen bearbeitet werden.

Im Code können Sie den folgenden Code verwenden, um den Bearbeitungsstatus zu ändern:

methods: {
  // 编辑表格行
  editRow(index) {
    if (this.editIndex !== -1) {
      // 如果已经在编辑状态，则提示用户
      alert('请先完成当前行的编辑');
      return;
    }
    // 将该行的所以设置为编辑状态
    this.editIndex = index;
  },
  // 保存表格行
  saveRow() {
    // 执行保存操作
    // ...

    // 重置编辑状态
    this.editIndex = -1;
  },
  // 取消表格行
  cancelRow() {
    // 重置编辑状态
    this.editIndex = -1;
  }
}

Im obigen Code wird die editRow-Methode verwendet, um den Bearbeitungsstatus der Tabellenzeile festzulegen, die saveRow-Methode wird verwendet, um die Ergebnisse zu speichern der Tabellenbearbeitung, und die Methode cancelRow wird zum Abbrechen der Tabellenbearbeitung verwendet.

3. Tabellenzeilen bearbeiten

In der Tabelle müssen beim Eintritt in den Bearbeitungszustand die Daten der Tabellenzeilen in einem bearbeitbaren Zustand angezeigt werden. In Vue kann dieser Effekt durch die Verwendung von Formularelementen wie Eingabe und Auswahl erreicht werden.

Wenn Sie beispielsweise die Spaltendaten „Name“ und „Alter“ in einer Tabellenzeile anzeigen, können Sie den folgenden Code verwenden:

<tr v-for="(item, index) in tableData" :key="index">
  <td>
    <input type="text" :value="editIndex === index ? item.name : item.name">
  </td>
  <td>
    <input type="text" :value="editIndex === index ? item.age : item.age">
  </td>
  <td>
    <button @click="editRow(index)">编辑</button>
    <button @click="saveRow()">保存</button>
    <button @click="cancelRow()">取消</button>
  </td>
</tr>

Im obigen Code wird das Eingabeelement verwendet, um den bearbeitbaren Status der Spaltendaten „Name“ und „Alter“ zu realisieren. Verwenden Sie drei Schaltflächen, um den Bearbeitungsstatus der Tabelle zu ändern. Mit der Schaltfläche „Speichern“ können Sie die Bearbeitungsergebnisse speichern, die Daten auf dem Hintergrundserver speichern oder die Daten im lokalen Status aktualisieren.

Zusammenfassung

Durch die oben genannten Schritte können wir Tabellen in Vue bearbeiten und stornieren. In der tatsächlichen Entwicklung können Bearbeitungsfunktionen je nach Bedarf angepasst werden, z. B. die Implementierung benutzerdefinierter Bearbeitungsfunktionen für Tabellenzellen, das Hinzufügen von Prüfsummen-Eingabeaufforderungen für Tabellendaten usw.

Das obige ist der detaillierte Inhalt vonWie bearbeite und storniere ich Tabellen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!