Comment utiliser Vue et Element-UI pour implémenter des fonctions d'ajout, de suppression, de modification et de requête de données

Comment utiliser Vue et Element-UI pour implémenter les fonctions d'ajout, de suppression, de modification et de requête de données

Introduction :
Vue et Element-UI sont actuellement des outils de développement front-end très populaires et pratiques. Leur combinaison nous permet de facilement. mettre en œuvre l’ajout, la suppression, la modification et l’interrogation de données. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter cette fonction et donnera des exemples de code correspondants.

1. Préparation
Avant de commencer à utiliser Vue et Element-UI, nous devons nous assurer qu'ils ont été installés. Il peut être installé via la commande suivante :

npm install vue
npm install element-ui

2. Créez le projet
Tout d'abord, nous devons créer un projet Vue et introduire Element-UI dans le projet. Vous pouvez créer et initialiser un projet Vue avec la commande suivante :

vue init webpack myproject
cd myproject
npm install

Ensuite, introduisez Element-UI dans le fichier main.js : main.js文件中引入Element-UI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

三、创建数据列表页面
在创建好的Vue项目中，我们可以新建一个组件来展示数据列表。可以新建一个List.vue文件，然后在其中编写如下代码：

<template>
  <div>
    <el-table :data="dataList">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
      <el-table-column label="Operation">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editData(scope.$index)">Edit</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteData(scope.$index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: 'Tom', age: 18, gender: 'Male' },
        { name: 'Jerry', age: 20, gender: 'Female' }
      ]
    };
  },
  methods: {
    editData(index) {
      // 编辑数据的逻辑
    },
    deleteData(index) {
      // 删除数据的逻辑
    }
  }
};
</script>

以上代码中，我们使用93c397d768f6925d18202fc5ab24bb28和5105b28ef72c35e5885d76b64ca78ad8来展示数据的列表，每一行数据中包括姓名（name）、年龄（age）、性别（gender）以及操作（编辑和删除）。在代码示例中，我们通过dataList数组来存储数据，并且定义了两个方法editData和deleteData来处理编辑和删除操作。你可以根据自己的实际需求来修改和扩展这些方法。

四、创建添加数据页面
除了展示数据列表之外，我们还需要一个页面来添加新的数据。可以新建一个Add.vue文件，然后在其中编写如下代码：

<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="form">
      <el-form-item label="Name" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="Age" prop="age">
        <el-input-number v-model="formData.age"></el-input-number>
      </el-form-item>
      <el-form-item label="Gender" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="Male"></el-radio>
          <el-radio label="Female"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addData">Add</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: 'Male'
      },
      formRules: {
        name: [
          { required: true, message: 'Name is required', trigger: 'blur' }
        ],
        age: [
          { required: true, message: 'Age is required', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    addData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 添加数据的逻辑
        }
      });
    }
  }
};
</script>

以上代码中，我们使用了7d427e22129094dbbdee82a7e6c7d93a、f8dd031f06a2a01ac090cee0ff84b020、03a25c924fc2f2f0ad6314aa6c02f781、c3801c5d1ceb88fdef4842994160bcf9和24839375987b8f1417e7930344cfc27e等组件来创建一个表单页面。用户可以在表单中填写姓名、年龄和性别，并通过点击“Add”按钮将数据添加到数据列表中。在代码示例中，我们使用了formData对象来存储表单数据，并定义了formRules来设置表单字段的校验规则。通过调用validate方法可以触发表单的验证，并在验证通过后执行添加数据的逻辑。

五、整合页面和路由配置
为了能够访问到上述两个页面，我们需要在src/router/index.js文件中进行路由的配置。修改后的index.js文件如下：

import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List'
import Add from '@/components/Add'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/list'
    },
    {
      path: '/list',
      name: 'List',
      component: List
    },
    {
      path: '/add',
      name: 'Add',
      component: Add
    }
  ]
})

通过以上配置，我们可以通过访问http://localhost:8080/list来查看数据列表页面，通过访问http://localhost:8080/addrrreee

3 Créez une page de liste de données

Dans la page créée. Vue Dans le projet, nous pouvons créer un nouveau composant pour afficher la liste des données. Vous pouvez créer un nouveau fichier List.vue et y écrire le code suivant :
rrreee

Dans le code ci-dessus, nous utilisons 93c397d768f6925d18202fc5ab24bb28 et d5b5857cb7665a728aeb45a270fceb95 pour afficher une liste de données. Chaque ligne de données comprend le nom, l'âge, le sexe et l'opération (modifier et supprimer). Dans l'exemple de code, nous stockons les données via le tableau dataList et définissons deux méthodes editData et deleteData pour gérer les opérations d'édition et de suppression. Vous pouvez modifier et étendre ces méthodes en fonction de vos besoins réels.

4. Créer une page d'ajout de données

En plus d'afficher la liste des données, nous avons également besoin d'une page pour ajouter de nouvelles données. Vous pouvez créer un nouveau fichier Add.vue et y écrire le code suivant :
• rrreee
Dans le code ci-dessus, nous avons utilisé 7d427e22129094dbbdee82a7e6c7d93a, f8dd031f06a2a01ac090cee0ff84b020, 03a25c924fc2f2f0ad6314aa6c02f781, c3801c5d1ceb88fdef4842994160bcf9 et <el -radio&gt ; et d'autres composants pour créer une page de formulaire. Les utilisateurs peuvent remplir leur nom, leur âge et leur sexe dans le formulaire et ajouter les données à la liste de données en cliquant sur le bouton « Ajouter ». Dans l'exemple de code, nous utilisons l'objet formData pour stocker les données du formulaire et définissons formRules pour définir des règles de validation pour les champs du formulaire. La validation du formulaire peut être déclenchée en appelant la méthode validate, et la logique d'ajout de données sera exécutée une fois la validation réussie.
• 5. Configuration intégrée de la page et du routage

Pour accéder aux deux pages ci-dessus, nous devons configurer le routage dans le fichier src/router/index.js. Le fichier index.js modifié est le suivant : 🎜rrreee🎜Avec la configuration ci-dessus, nous pouvons afficher la page de liste de données en accédant à http://localhost:8080/list . Visitez http://localhost:8080/add pour afficher la page d'ajout de données. Vous pouvez également modifier la configuration du routage selon vos besoins. 🎜🎜6. Résumé🎜Grâce à l'introduction de cet article, nous avons appris à utiliser Vue et Element-UI pour implémenter les fonctions d'ajout, de suppression, de modification et de requête de données. Nous créons deux pages pour la liste des données et ajoutons des données, et accédons à la page via la configuration de routage, réalisant ainsi l'affichage et l'ajout de données. Bien entendu, nous pouvons également modifier et étendre ces fonctions en fonction des besoins réels. J'espère que cet article vous sera utile pour utiliser Vue et Element-UI pour implémenter la fonction d'ajout, de suppression, de modification et de vérification des données. 🎜🎜Exemple de code : 🎜🎜🎜List.vue : [Lien](https://gist.github.com/gistlynx/9dd8a04f8c9e313297ad911f4fa7d07b) 🎜🎜Add.vue : [Lien](https://gist.github.com/ gistlynx/73dc9fe6c14c006df0d40295d78793f6)🎜🎜

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!