Comment implémenter des tables modifiables dans Vue

Dans de nombreuses applications web, les tableaux sont un composant essentiel. Les tableaux contiennent généralement de grandes quantités de données. Ils nécessitent donc certaines fonctionnalités spécifiques pour améliorer l'expérience utilisateur. L'une des fonctionnalités importantes est la possibilité de modification. Dans cet article, nous explorerons comment implémenter des tables modifiables à l'aide de Vue.js et fournirons des exemples de code spécifiques.

Étape 1 : Préparer les données

Tout d'abord, nous devons préparer les données pour le tableau. Nous pouvons utiliser un objet JSON pour stocker les données de la table et les stocker dans la propriété data de l'instance Vue. Dans cet exemple, nous allons créer un tableau simple avec trois colonnes : Nom, Quantité et Prix. Voici les exemples de données que nous allons utiliser :

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

Étape 2 : Créer le composant table

Nous utiliserons le composant Vue.js pour créer la table. L'un des avantages de l'utilisation de composants est qu'ils peuvent être réutilisés et utilisés plusieurs fois au sein d'une application Vue. Voici la structure de base du composant table que nous allons créer :

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

Le composant a un nom appelé "TableComponent" et utilise l'attribut props pour recevoir notre précédente collection de données comme propriétés. La directive v-for est utilisée pour afficher les lignes d'un tableau. Cette directive parcourt chaque objet du tableau items et crée la ligne correspondante. 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

Étape 3 : Activer l'édition

Maintenant, nous sommes prêts à afficher le tableau dans l'application. L'étape suivante consiste à rendre le tableau modifiable. Pour y parvenir, nous ajouterons un bouton "Modifier". Lorsque l'utilisateur clique sur le bouton, la fonctionnalité d'édition de la cellule correspondante est activée.

Voici le code de base du bouton d'édition que nous ajouterons au tableau :

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

Nous avons ajouté un bouton et lorsque l'utilisateur clique sur le bouton, la méthode addRow sera appelée. Cette méthode ajoutera un nouvel objet item au tableau items, les valeurs initiales étant la chaîne vide, 0 et 0.

Étape 4 : Activer l'édition de cellules

Maintenant, nous avons la possibilité d'ajouter de nouvelles lignes. L'étape suivante consiste à activer l'édition de cellules. Une fois que l'utilisateur clique sur le bouton Modifier, nous rendrons la cellule concernée modifiable. 🎜🎜Nous utiliserons le code suivant pour activer l'édition de cellules : 🎜rrreee🎜Nous ajouterons un attribut de niveau supérieur "modifiable" pour suivre l'état d'édition des lignes et des cellules du tableau. Par défaut, editable est défini sur false. 🎜🎜En utilisant la méthode toggleRowEdit, nous pouvons basculer l'état de la ligne lorsque l'on clique sur le bouton d'édition. Si la ligne n'est actuellement pas modifiée, la fonction définit la valeur modifiable de la ligne sur true et ajoute une zone de texte à la cellule pour activer l'état de modification. Dans cet état, si nous cliquons sur une autre cellule, nous utiliserons la méthode toggleCellEdit pour basculer l'état de la cellule. 🎜🎜Cette méthode remplace le texte original par l'élément HTML contenant la zone de texte et le concentre dans la zone de texte. Une fois la saisie terminée, la méthode de complétion de modification de cellule cellEditDone sera appelée pour mettre à jour la valeur dans la collection de données et fermer l'état d'édition. 🎜🎜Étape 5 : Exécuter l'application🎜🎜Nous sommes prêts à exécuter l'application et à tester le formulaire modifiable. Voici un contexte Vue.js de base utilisé pour restituer et tester notre composant table modifiable : 🎜rrreee🎜 Nous le transmettons au composant table lors de son initialisation à l'aide de la propriété item. Cela permettra à l'instance du composant d'accéder à notre objet de données et de le restituer dans le tableau. La fonctionnalité permettant d'ajouter de nouvelles lignes et de modifier les lignes existantes fonctionne très bien. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à créer un tableau modifiable à l'aide de Vue.js. Nous avons appris comment utiliser les composants Vue pour organiser les tableaux, comment activer la possibilité de modification et comment traiter les entrées et les enregistrer dans notre collection de données. Nous avons fourni des exemples de code complets pour votre commodité d'utilisation et de test. En utilisant les techniques explorées dans cet article, vous pouvez créer rapidement et facilement des formulaires entièrement fonctionnels et hautement personnalisables pour améliorer l'expérience utilisateur de votre application Web. 🎜

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!