如何通过 Vue 和 Element Plus 实现数据的增删改查功能
概述：Vue 是一套用于构建用户界面的渐进式框架，它与 Element Plus 这个基于 Vue 2.x 的 UI 组件库相结合，可以帮助我们快速搭建具备数据增删改查功能的界面。本文将介绍如何利用Vue和Element Plus实现数据的增删改查功能，并给出相应的代码示例。
- 安装和引入 Element Plus：首先，我们需要安装和引入 Element Plus，这里我们以 npm 的方式进行安装。
首先，打开命令行工具，并切换到项目目录下。执行以下命令安装 Element Plus：
npm install element-plus --save
然后，在 main.js 中引入 Element Plus 的样式和组件：
import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'createApp(App).use(ElementPlus).mount('#app')
- 创建数据列表和表单组件：接下来，我们创建两个组件来展示数据列表和表单。
在 src 目录下创建 components 文件夹，并分别创建 List.vue 和 Form.vue 两个文件。
其中，List.vue 用于展示数据列表，包括表头和数据行。Form.vue 用于新增和编辑数据的表单。
List.vue 示例代码：
<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 示例代码：
<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>
- 在父组件中使用 List 和 Form：在父组件中引入 List 和 Form，并使用它们展示数据列表和新增/编辑表单。
<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>
在父组件中，我们传入包含数据的 list 数组到 List 组件的 data 属性中，然后在 List 组件中通过 v-for 循环渲染数据列表。
- 实现新增和编辑功能：在 List 组件的 methods 中，我们可以实现编辑和删除数据的逻辑。具体实现方法如下：
edit(row) { // 编辑逻辑 this.editingData = { ...row } this.showForm = true},del(row) { // 删除逻辑 const index = this.data.indexOf(row) this.data.splice(index, 1)}
在 Form 组件的 methods 中，我们可以实现新增和编辑数据的逻辑。具体实现方法如下：
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()}
以上代码示例演示了如何通过 Vue 和 Element Plus 实现数据的增删改查功能。通过 List 组件展示数据列表，并通过 Form 组件实现新增和编辑数据的表单。利用父子组件间的通信，我们可以实现数据的传递和更新，从而实现对数据的增删改查操作。
我喜欢出发。凡是到达了的地方，
