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.

1. Element Plus installieren und einführen:
   Zuerst müssen wir Element Plus installieren und einführen, hier installieren wir es mit npm.

Ö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')

2. Erstellen Sie Datenlisten- und Formularkomponenten:
   Als nächstes erstellen wir zwei Komponenten, um die Datenliste und das Formular anzuzeigen .

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>

3. Liste und Formular in der übergeordneten Komponente verwenden:
   Liste und Formular in der übergeordneten Komponente einführen und zum Anzeigen der Datenliste und zum Hinzufügen verwenden / Formular bearbeiten.

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

4. Neue und Bearbeitungsfunktionen implementieren:
   In den Methoden der Listenkomponente können wir die Logik zum Bearbeiten und Löschen von Daten implementieren. Die spezifische Implementierungsmethode lautet wie folgt:

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!