Heim > Artikel > Web-Frontend > So implementieren Sie Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten über Vue und Element-Plus
So implementieren Sie Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten über Vue und Element Plus
Übersicht:
Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Es wird mit Element Plus kombiniert, einer UI-Komponentenbibliothek basierend auf Vue 2.x , um uns dabei zu helfen, schnell eine Schnittstelle mit Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten zu erstellen. In diesem Artikel wird erläutert, wie Sie mit Vue und Element Plus die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten implementieren und entsprechende Codebeispiele angeben.
Öffnen Sie zunächst das Kommandozeilentool und wechseln Sie in das Projektverzeichnis. Führen Sie den folgenden Befehl aus, um Element Plus zu installieren:
npm install element-plus --save
Dann führen Sie Element Plus-Stile und -Komponenten in main.js ein:
import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(ElementPlus).mount('#app')
Erstellen Sie den Komponentenordner im src-Verzeichnis und erstellen Sie zwei Dateien, List.vue bzw. Form.vue.
Unter anderem wird List.vue zum Anzeigen der Datenliste verwendet, einschließlich Tabellenüberschriften und Datenzeilen. Form.vue ist ein Formular zum Hinzufügen und Bearbeiten von Daten.
List.vue-Beispielcode:
<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>
Form.vue-Beispielcode:
<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>
<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>
In der übergeordneten Komponente übergeben wir das Listenarray mit Daten an das Datenattribut der Listenkomponente und rendern dann die Datenliste über die V-for-Schleife in der Listenkomponente.
edit(row) { // 编辑逻辑 this.editingData = { ...row } this.showForm = true }, del(row) { // 删除逻辑 const index = this.data.indexOf(row) this.data.splice(index, 1) }
In den Methoden der Formularkomponente können wir die Logik zum Hinzufügen und Bearbeiten von Daten implementieren. Die spezifische Implementierungsmethode lautet wie folgt:
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() }
Das obige Codebeispiel zeigt, wie die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten über Vue und Element Plus implementiert werden. Verwenden Sie die Listenkomponente, um die Datenliste anzuzeigen, und verwenden Sie die Formularkomponente, um Formulare zum Hinzufügen und Bearbeiten von Daten zu implementieren. Mithilfe der Kommunikation zwischen übergeordneten und untergeordneten Komponenten können wir die Übertragung und Aktualisierung von Daten und damit das Hinzufügen, Löschen, Ändern und Abfragen von Daten realisieren.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Daten über Vue und Element-Plus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!