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>

以上代码中，我们使用<el-table>和<el-table-column>来展示数据的列表，每一行数据中包括姓名（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>

以上代码中，我们使用了<el-form>、<el-form-item>、<el-input>、<el-input-number>和<el-radio>等组件来创建一个表单页面。用户可以在表单中填写姓名、年龄和性别，并通过点击“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

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

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 <el-form>, &lt ;el-form-item>, <el-input>, <el-input-number> 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

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!