Vue2中使用Element-ui组件实现表单增加、删除、修改、查询功能

一、前言

 本篇文章旨在实现利用element-ui实现表单的增加、删除、修改以及查询操作。在现代Web开发中，用户界面的构建效率和用户体验显得尤为重要。Vue.js作为一款轻量级的JavaScript框架，以其简洁的API和灵活的组件化设计受到开发者的青睐。而Element UI作为一款基于Vue的组件库，为开发者提供了一系列高质量的UI组件，极大地简化了界面的设计和实现过程。在这篇博客中，我们将探讨如何在Vue 2.x中使用Element UI组件来实现表单的增、删、改、查（CRUD）功能。我们将逐步介绍表单的创建与布局，数据的管理与操作，以及如何通过Element UI的强大组件来提升用户体验。无论您是刚入门的开发者，还是希望进一步提高项目开发效率的专业人员，希望本文能为您提供清晰的思路和实用的代码示例，让您的开发之旅更加顺利。让我们一起深入探索Vue 2与Element UI的结合应用吧！

二、el-dialog组件准备

静态结构

首先准备el-dialog组件的静态结构

  <!-- 点击添加弹框区域 -->
        <el-dialog :title="modelType === 0 ? '添加用户' : '编辑用户'" :visible.sync="dialogVisible" width="50%"
            @click="handleClose">
            <el-form :model="form" label-width="80px" :inline="true" :rules="rules" ref="form">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input placeholder="请输入年龄" v-model.number="form.age"></el-input>
                </el-form-item>
                <!-- 添加性别 -->
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="地址" prop="addr">
                    <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部 -->
            <span slot="footer" class="dialog-footer" style="justify-content: flex-end;">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

按钮组件添加事件

 <!-- 添加用户按钮 -->
            <el-button type="primary" @click="handleAdd">+添加</el-button>

二、实现页面

点击添加用户按钮

三、准备数据dialogVisible,rules,tableData,modelType,form

modelType的值用来判断是新增数据还是修改数据

    data() {
        return {
            dialogVisible: false,
            form: {
                name: '',
                age: '',
                sex: '',
                birth: null,
                addr: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名' }
                ],
                age: [
                    { required: true, message: '请输入年龄' }
                ],
                sex: [
                    { required: true, message: '请选择性别' }
                ],
                birth: [
                    { required: true, message: '请选择出生日期' }
                ],
                addr: [
                    { required: true, message: '请输入地址' }
                ]
            },

            tableData: [],
            modelType: 0,//0表示新增，1表示编辑
}

四、methods中处理逻辑

  methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                // 能否通过校验，后续对表单数据的处理
                if (valid) {
                    // 提交表单
                    console.log('提交的用户信息', this.form);
                    if (this.modelType === 0) {
                        addUser(this.form).then(res => {
                            this.getList()
                        })
                    } else {
                        editUser(this.form).then(res => {
                            this.getList()
                        })
                    }
                    //清空表达数据
                    this.$refs.form.resetFields();
                    this.dialogVisible = false;
                } else {
                    console.error('表单验证失败');
                    return false;
                }
            });
        },
        // 右下角取消按钮
        handleCancel() {
            this.handleClose();
        },
        // 右上角关闭按钮
        handleClose() {
            // 这里可以添加额外的逻辑
            this.$refs.form.resetFields();
            this.dialogVisible = false;
        },
        //编辑
        handleEdit(row) {
            this.modelType = 1
            console.log('点击编辑');
            this.dialogVisible = true;
            // 需要利用深拷贝的方法
            this.form = JSON.parse(JSON.stringify(row));
        }
}

 五、新增数据的请求方法getList添加数据到后端

//新增
        getList() {
            // 模拟异步获取数据
            getUser({ params: { ...this.userForm, ...this.pageData } }).then(res => {
                console.log(res);
                this.tableData = res.data.data.list;
                console.log(this.tableData);
                this.total = res.data.data.count || 0;
            })

        },