Comment implémenter des fonctions d'ajout, de suppression, de modification et de requête de données via vue et Element-plus

Comment implémenter des fonctions d'ajout, de suppression, de modification et de requête de données via Vue et Element Plus

Présentation :
Vue est un framework progressif pour la création d'interfaces utilisateur. Il est combiné avec Element Plus, une bibliothèque de composants d'interface utilisateur basée sur Vue 2.x. , pour nous aider à construire rapidement une interface avec des fonctions d'ajout, de suppression, de modification et de requête de données. Cet article expliquera comment utiliser Vue et Element Plus pour implémenter les fonctions d'ajout, de suppression, de modification et de requête de données, et donnera des exemples de code correspondants.

1. Installer et introduire Element Plus :
   Tout d'abord, nous devons installer et introduire Element Plus, ici nous l'installons avec npm.

Tout d'abord, ouvrez l'outil de ligne de commande et passez au répertoire du projet. Exécutez la commande suivante pour installer Element Plus :

npm install element-plus --save

Ensuite, introduisez les styles et les composants Element Plus dans main.js :

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

2. Créez une liste de données et des composants de formulaire :
   Ensuite, nous créons deux composants pour afficher la liste de données et le formulaire. .

Créez le dossier composants dans le répertoire src et créez respectivement deux fichiers, List.vue et Form.vue.

Parmi eux, List.vue est utilisé pour afficher la liste des données, y compris les en-têtes de tableau et les lignes de données. Form.vue est un formulaire utilisé pour ajouter et modifier des données.

Exemple de code List.vue :

<template>
  <div>
    <el-table :data="data" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="edit(row)">编辑</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    edit(row) {
      // 编辑逻辑
    },
    del(row) {
      // 删除逻辑
    }
  }
}
</script>

Exemple de code Form.vue :

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      // 提交逻辑
    }
  }
}
</script>

3. Utilisez List et Form dans le composant parent :
   Introduisez List et Form dans le composant parent et utilisez-les pour afficher la liste de données et ajouter /Modifier le formulaire.

<template>
  <div>
    <List :data="list" />
    <Form />
  </div>
</template>

<script>
import List from './components/List.vue'
import Form from './components/Form.vue'

export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', age: '20' },
        { id: 2, name: '李四', age: '25' }
      ]
    }
  },
  components: {
    List,
    Form
  }
}
</script>

Dans le composant parent, nous transmettons le tableau de liste contenant les données à l'attribut data du composant List, puis restituons la liste de données via la boucle v-for dans le composant List.

4. Implémenter des fonctions de création et d'édition :
   Dans les méthodes du composant List, nous pouvons implémenter la logique d'édition et de suppression de données. La méthode d'implémentation spécifique est la suivante :

edit(row) {
  // 编辑逻辑
  this.editingData = { ...row }
  this.showForm = true
},
del(row) {
  // 删除逻辑
  const index = this.data.indexOf(row)
  this.data.splice(index, 1)
}

Dans les méthodes du composant Form, nous pouvons implémenter la logique d'ajout et d'édition de données. La méthode d'implémentation spécifique est la suivante :

submit() {
  // 提交逻辑
  this.$refs.form.validate((valid) => {
    if (valid) {
      // 表单验证通过
      if (this.editingData) {
        // 编辑数据
        const index = this.data.findIndex(item => item.id === this.editingData.id)
        this.data.splice(index, 1, this.editingData)
      } else {
        // 新增数据
        const id = Math.max(...this.data.map(item => item.id)) + 1
        this.data.push({ ...this.form, id })
      }
      this.resetForm()
    } else {
      // 表单验证未通过
      return false
    }
  })
},
resetForm() {
  // 重置表单
  this.editingData = null
  this.form = {
    name: '',
    age: ''
  }
  this.$refs.form.resetFields()
}

L'exemple de code ci-dessus montre comment implémenter les fonctions d'ajout, de suppression, de modification et de requête de données via Vue et Element Plus. Utilisez le composant List pour afficher la liste de données et utilisez le composant Form pour implémenter des formulaires permettant d'ajouter et de modifier des données. Grâce à la communication entre les composants parents et enfants, nous pouvons réaliser le transfert et la mise à jour des données, réalisant ainsi les opérations d'ajout, de suppression, de modification et d'interrogation des données.

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!