Comment implémenter l'ajout, la suppression, la modification et l'interrogation de données dans Vue et les combiner avec des boîtes de dialogue

Ces dernières années, avec le développement continu de la technologie front-end, Vue est devenue le framework front-end choisi par de plus en plus de développeurs. Parmi elles, l'ajout, la suppression, la modification et l'interrogation de données frontales sont l'une des fonctions les plus élémentaires des applications Web. Dans Vue, comment ajouter, supprimer, modifier et vérifier tout en faisant apparaître une boîte de dialogue ? Ensuite, cet article vous expliquera comment ajouter, supprimer, modifier et interroger des données dans Vue, et comment combiner des boîtes de dialogue pour améliorer l'interactivité de l'utilisateur.

1. Pré-préparation

Avant de pratiquer Vue, nous devons comprendre et maîtriser les technologies suivantes :

1. Connaissance de base de Vue : y compris les composants, la liaison de données, les méthodes, les cycles de vie et autres contenus connexes ; : Une bibliothèque de composants d'interface utilisateur basée sur Vue2.0, qui fournit un riche ensemble de composants d'interface utilisateur, notamment des tableaux, des boîtes de dialogue, des listes déroulantes, etc.
2. Webpack : un gestionnaire de ressources moderne capable de combiner plusieurs fichiers JavaScript en un seul ; fichier pour réduire les temps de chargement.
3. 2. Implémenter les opérations d'ajout, de suppression, de modification et de vérification

Initialisation des données

1. Dans Vue, nous utilisons l'option data pour définir les données. Définissez d’abord un objet de données dans l’instance Vue et ajoutez des variables pour y stocker les données. Prenons comme exemple un tableau simple, comme suit :

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

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

Implémenter l'opération d'ajout de données

2. L'implémentation de l'ajout de données dans Vue nécessite l'utilisation de l'instruction v-model. La fonction de cette instruction est de combiner les. données des éléments du formulaire avec l'instance Vue. Lorsque la valeur du formulaire change, les données correspondantes seront également mises à jour. Par exemple, si nous ajoutons une donnée à la table, nous pouvons utiliser le code suivant pour y parvenir :

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

Implémenter l'opération de suppression de données

3. L'opération de suppression de données dans Vue est une opération très courante, et la suppression est obtenu en cliquant sur un bouton ou un lien. Dans Vue, vous pouvez utiliser l'instruction v-for pour parcourir les données de la table et appeler la fonction de suppression correspondante via des événements. Voici l'implémentation du code pour la suppression des données :

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

Implémentation de l'opération d'édition des données

4. Dans Vue, l'opération d'édition des données doit être divisée en deux étapes : l'une consiste à afficher les données modifiées sous le formulaire, et l'autre l'autre consiste à afficher les données modifiées. Les données sont soumises au serveur. Vous pouvez afficher les données modifiées dans le formulaire via l'instruction v-model, puis soumettre les données modifiées en soumettant le formulaire. Voici l'implémentation du code pour l'édition des données :

<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. Combiner des boîtes de dialogue pour obtenir des effets interactifs

La bibliothèque de composants Element UI dans Vue fournit une multitude de composants, y compris des composants de dialogue, qui peuvent facilement implémenter des boîtes de dialogue contextuelles. effet. Dans Vue, l'implémentation du composant de dialogue nécessite l'introduction de la bibliothèque de composants Element UI. Voici l'implémentation du code du composant de dialogue :

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

Cet article présente principalement la méthode d'implémentation des fonctions de base telles que ajout, suppression, modification et recherche dans Vue En même temps, il combine le composant de dialogue pour obtenir l'effet d'améliorer l'interactivité de l'utilisateur. Il convient de noter que dans le développement réel, nous devons apporter les modifications et améliorations correspondantes en fonction des besoins. Lors de l'utilisation, nous devons prêter attention à l'efficacité et à la lisibilité du code, ainsi qu'à la séparation du code et du HTML et à d'autres problèmes connexes.

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!