So verwenden Sie Vue und Element-UI, um Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten zu implementieren

So verwenden Sie Vue und Element-UI zum Implementieren der Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten.

Einführung:
Vue und Element-UI sind derzeit sehr beliebte und praktische Front-End-Entwicklungstools. Ihre Kombination ermöglicht uns eine einfache Implementieren Sie das Hinzufügen, Löschen, Ändern und Abfragen von Daten. In diesem Artikel wird die Verwendung von Vue und Element-UI zum Implementieren dieser Funktion vorgestellt und entsprechende Codebeispiele gegeben.

1. Vorbereitung
Bevor wir Vue und Element-UI verwenden, müssen wir sicherstellen, dass sie installiert wurden. Es kann über den folgenden Befehl installiert werden:

npm install vue
npm install element-ui

2. Erstellen Sie das Projekt
Zuerst müssen wir ein Vue-Projekt erstellen und Element-UI in das Projekt einführen. Sie können ein Vue-Projekt mit dem folgenden Befehl erstellen und initialisieren:

vue init webpack myproject
cd myproject
npm install

Fügen Sie dann Element-UI in die Datei main.js ein: 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. Erstellen Sie eine Datenlistenseite

In der erstellten Datei Vue Im Projekt können wir eine neue Komponente erstellen, um die Datenliste anzuzeigen. Sie können eine neue List.vue-Datei erstellen und den folgenden Code hineinschreiben:
rrreee

Im obigen Code verwenden wir 93c397d768f6925d18202fc5ab24bb28 und 5105b28ef72c35e5885d76b64ca78ad8, um eine Liste mit Daten anzuzeigen. Jede Datenzeile enthält Name, Alter, Geschlecht und Vorgang (Bearbeiten und Löschen). Im Codebeispiel speichern wir Daten über das Array dataList und definieren zwei Methoden editData und deleteData, um Bearbeitungs- und Löschvorgänge durchzuführen. Sie können diese Methoden entsprechend Ihren tatsächlichen Bedürfnissen modifizieren und erweitern.

4. Erstellen Sie eine Seite zum Hinzufügen von Daten

Zusätzlich zur Anzeige der Datenliste benötigen wir auch eine Seite zum Hinzufügen neuer Daten. Sie können eine neue Add.vue-Datei erstellen und den folgenden Code hineinschreiben:
• rrreee
Im obigen Code haben wir 7d427e22129094dbbdee82a7e6c7d93a, &lt ;el-form-item>, 03a25c924fc2f2f0ad6314aa6c02f781, c3801c5d1ceb88fdef4842994160bcf9 und <el -radio&gt ; und andere Komponenten zum Erstellen einer Formularseite. Benutzer können ihren Namen, ihr Alter und ihr Geschlecht in das Formular eingeben und die Daten durch Klicken auf die Schaltfläche „Hinzufügen“ zur Datenliste hinzufügen. Im Codebeispiel verwenden wir das Objekt formData zum Speichern von Formulardaten und definieren formRules, um Validierungsregeln für Formularfelder festzulegen. Die Validierung des Formulars kann durch Aufrufen der Methode validate ausgelöst werden, und die Logik zum Hinzufügen von Daten wird ausgeführt, nachdem die Validierung bestanden wurde.
• 5. Integrierte Seiten- und Routing-Konfiguration

Um auf die beiden oben genannten Seiten zuzugreifen, müssen wir das Routing in der Datei src/router/index.js konfigurieren. Die geänderte Datei index.js lautet wie folgt: 🎜rrreee🎜Mit der obigen Konfiguration können wir die Datenlistenseite anzeigen, indem wir auf http://localhost:8080/list zugreifen . Besuchen Sie http://localhost:8080/add, um die Seite zum Hinzufügen von Daten anzuzeigen. Sie können die Routing-Konfiguration auch entsprechend Ihren eigenen Bedürfnissen ändern. 🎜🎜6. Zusammenfassung🎜Durch die Einleitung dieses Artikels haben wir gelernt, wie man mit Vue und Element-UI die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten implementiert. Wir erstellen zwei Seiten für die Datenliste und das Hinzufügen von Daten und greifen über die Routing-Konfiguration auf die Seite zu, wodurch die Anzeige und das Hinzufügen von Daten realisiert werden. Selbstverständlich können wir diese Funktionen auch je nach tatsächlichem Bedarf modifizieren und erweitern. Ich hoffe, dass dieser Artikel Ihnen dabei hilft, mit Vue und Element-UI die Funktion zum Hinzufügen, Löschen, Ändern und Überprüfen von Daten zu implementieren. 🎜🎜Codebeispiel: 🎜🎜🎜List.vue: [Link](https://gist.github.com/gistlynx/9dd8a04f8c9e313297ad911f4fa7d07b) 🎜🎜Add.vue: [Link](https://gist.github.com/ gistlynx/73dc9fe6c14c006df0d40295d78793f6)🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!