So implementieren Sie bearbeitbare Tabellen in Vue

In vielen Webanwendungen sind Tabellen ein wesentlicher Bestandteil. Tabellen enthalten normalerweise große Datenmengen, daher erfordern Tabellen einige spezifische Funktionen, um die Benutzererfahrung zu verbessern. Eine der wichtigen Funktionen ist die Bearbeitbarkeit. In diesem Artikel untersuchen wir, wie bearbeitbare Tabellen mit Vue.js implementiert werden, und stellen spezifische Codebeispiele bereit.

Schritt 1: Daten vorbereiten

Zuerst müssen wir die Daten für die Tabelle vorbereiten. Wir können ein JSON-Objekt verwenden, um die Daten der Tabelle zu speichern und sie in der Dateneigenschaft der Vue-Instanz zu speichern. In diesem Beispiel erstellen wir eine einfache Tabelle mit drei Spalten: Name, Menge und Preis. Hier sind die Beispieldaten, die wir verwenden werden:

data: {
  items: [
    { name: 'Item 1', quantity: 1, price: 10 },
    { name: 'Item 2', quantity: 2, price: 20 },
    { name: 'Item 3', quantity: 3, price: 30 }
  ]
}

Schritt 2: Erstellen Sie die Tabellenkomponente

Wir verwenden die Vue.js-Komponente, um die Tabelle zu erstellen. Einer der Vorteile der Verwendung von Komponenten besteht darin, dass sie innerhalb einer Vue-Anwendung wiederverwendet und mehrfach verwendet werden können. Hier ist die Grundstruktur der Tabellenkomponente, die wir erstellen werden:

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{ item.name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

Die Komponente hat einen Namen namens „TableComponent“ und verwendet das Props-Attribut, um unsere vorherige Datensammlung als Eigenschaften zu erhalten. Die v-for-Direktive wird zum Rendern von Zeilen in einer Tabelle verwendet. Diese Anweisung durchläuft jedes Objekt im Array items und erstellt die entsprechende Zeile. v-for指令用于渲染表格中的行。该指令循环遍历items数组中的每个对象并创建对应的行。

步骤3：启用编辑

现在，我们已经可以在应用程序中显示表格了。下一步是使表格可编辑。为了实现这一点，我们将添加一个“编辑”按钮。用户单击该按钮后，将启用相应单元格的编辑功能。

以下是我们将在表格中添加的编辑按钮的基本代码：

<template>
  <!---  添加按钮  -->
  <table>
    <!---  前面的表头和tbody就不再赘述  -->
    <tfoot>
      <tr>
        <td colspan="3">
          <button @click="addRow">Add Row</button>
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      this.items.push({
        name: '',
        quantity: 0,
        price: 0
      })
    }
  }
}
</script>

我们添加了一个按钮，当用户单击该按钮时，将调用addRow方法。该方法将向items数组添加一个新项目对象，初始值为空字符串、0和0。

步骤4：启用单元格编辑

现在，我们已经有了添加新行的功能。下一步是启用单元格编辑功能。一旦用户单击编辑按钮，我们将使相关单元格变为可编辑状态。

我们将使用以下代码来启用单元格编辑功能：

<template>
  <table>
    <!---  前面的表头、tbody和tfoot  -->

    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'name')">{{ item.name }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'quantity')">{{ item.quantity }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'price')">{{ item.price }}</td>
        <td>
          <button @click="toggleRowEdit(index)">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      // 添加新行
    },
    toggleRowEdit(index) {
      let item = this.items[index]
      item.editable = !item.editable
    },
    toggleCellEdit(index, key) {
      let item = this.items[index]
      if (item.editable) {
        return
      }
      item.editable = true
      let el = this.$refs['cell-' + index + '-' + key]
      let oldVal = el.innerText
      el.innerHTML = '<input type="text" value="' + oldVal + '" @blur="cellEditDone(' + index + ', '' + key + '', $event)">'
      el.focus()

    },
    cellEditDone(index, key, event) {
      let item = this.items[index]
      item.editable = false
      item[key] = event.target.value
    }
  }
}
</script>

我们将添加一个顶级属性“editable”，以跟踪表格行和单元格的编辑状态。在默认情况下，editable设置为false。

使用toggleRowEdit方法，我们可以在单击编辑按钮时切换行的状态。如果行当前是非编订状态，函数将行的editable值设置为true，并在单元格中添加一个文本框，以使编辑状态启动。在此状态下，如果单击其他单元格，我们将使用toggleCellEdit方法来切换单元格的状态。

该方法将原始文本替换为包含文本框的HTML元素，并将其聚焦到文本框中。在输入完成后，将调用单元格编辑完成方法cellEditDone

Schritt 3: Bearbeitung aktivieren

Jetzt können wir die Tabelle in der Anwendung anzeigen. Der nächste Schritt besteht darin, die Tabelle bearbeitbar zu machen. Um dies zu erreichen, werden wir eine Schaltfläche „Bearbeiten“ hinzufügen. Wenn der Benutzer auf die Schaltfläche klickt, wird die Bearbeitungsfunktion der entsprechenden Zelle aktiviert.

Hier ist der grundlegende Code für die Schaltfläche „Bearbeiten“, die wir der Tabelle hinzufügen werden:

<template>
  <div>
    <table-component :items="items" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data: {
    items: [
      { name: 'Item 1', quantity: 1, price: 10 },
      { name: 'Item 2', quantity: 2, price: 20 },
      { name: 'Item 3', quantity: 3, price: 30 }
    ]
  }
}
</script>

Wir haben eine Schaltfläche hinzugefügt und wenn der Benutzer auf die Schaltfläche klickt, wird die Methode addRow aufgerufen. Diese Methode fügt dem Array items ein neues Elementobjekt hinzu, wobei die Anfangswerte die leere Zeichenfolge 0 und 0 sind.

Schritt 4: Zellenbearbeitung aktivieren

Jetzt haben wir die Möglichkeit, neue Zeilen hinzuzufügen. Der nächste Schritt besteht darin, die Zellenbearbeitung zu aktivieren. Sobald der Benutzer auf die Schaltfläche „Bearbeiten“ klickt, machen wir die entsprechende Zelle bearbeitbar. 🎜🎜Wir werden den folgenden Code verwenden, um die Zellenbearbeitung zu ermöglichen: 🎜rrreee🎜Wir werden ein Top-Level-Attribut „editable“ hinzufügen, um den Bearbeitungsstatus von Tabellenzeilen und -zellen zu verfolgen. Standardmäßig ist editierbar auf „false“ gesetzt. 🎜🎜Mit der Methode toggleRowEdit können wir den Status der Zeile umschalten, wenn auf die Schaltfläche „Bearbeiten“ geklickt wird. Wenn die Zeile derzeit unbearbeitet ist, setzt die Funktion den bearbeitbaren Wert der Zeile auf „True“ und fügt der Zelle ein Textfeld hinzu, um den Bearbeitungsstatus zu aktivieren. Wenn wir in diesem Zustand auf eine andere Zelle klicken, verwenden wir die Methode toggleCellEdit, um den Zustand der Zelle umzuschalten. 🎜🎜Diese Methode ersetzt den Originaltext durch das HTML-Element, das das Textfeld enthält, und fokussiert ihn im Textfeld. Nachdem die Eingabe abgeschlossen ist, wird die Zellbearbeitungsabschlussmethode cellEditDone aufgerufen, um den Wert in der Datensammlung zu aktualisieren und den Bearbeitungsstatus zu schließen. 🎜🎜Schritt 5: Führen Sie die App aus🎜🎜Wir sind bereit, die App auszuführen und das bearbeitbare Formular zu testen. Hier ist ein grundlegender Vue.js-Kontext, der zum Rendern und Testen unserer bearbeitbaren Tabellenkomponente verwendet wird: 🎜rrreee🎜 Wir übergeben ihn an die Tabellenkomponente, wenn wir sie mithilfe der Item-Eigenschaft initialisieren. Dadurch kann die Komponenteninstanz auf unser Datenobjekt zugreifen und es in der Tabelle rendern. Die Funktionalität zum Hinzufügen neuer Zeilen und Bearbeiten vorhandener Zeilen funktioniert einwandfrei. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man mit Vue.js eine bearbeitbare Tabelle erstellt. Wir haben gelernt, wie man Vue-Komponenten zum Organisieren von Tabellen verwendet, wie man die Bearbeitbarkeit ermöglicht und wie man Eingaben verarbeitet und in unserer Datensammlung speichert. Wir haben vollständige Codebeispiele bereitgestellt, damit Sie sie bequem verwenden und testen können. Mithilfe der in diesem Artikel beschriebenen Techniken können Sie schnell und einfach voll funktionsfähige und hochgradig anpassbare Formulare erstellen, um die Benutzererfahrung Ihrer Webanwendung zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie bearbeitbare Tabellen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!