Vue管理系统项目—添加和修改共用一个弹窗的骚操作（方法模块化封装，让你的代码提升n个档次）

Beiyux

已于 2022-01-22 11:43:30 修改

阅读量3.3k

点赞数 7

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-01-21 21:51:12 首次发布

本文链接：https://blog.csdn.net/weixin_45745641/article/details/122628998

版权

本文介绍了如何在Vue管理项目中，通过状态判断实现添加和修改功能共用一个弹窗，以及封装请求函数，降低代码冗余。详细讲解了状态控制、API封装以及回调函数的应用，旨在提升代码质量与可维护性。

摘要由CSDN通过智能技术生成

前言

在管理系统中，表格信息的添加和删除是经常写的操作，大部分人对于这两个功能的实现都是使用两个弹窗el-dialog来实现，今天教大家两个功能共用一个弹窗，并且共用一个方法，不同的操作只需要传入不同的参数便能实现效果。学会了这个骚操作，代码至少提升一个档次

共用一个弹窗

共用一个弹窗，我们只需要定义一个状态state，如果为真，则是添加；为假，则是修改

<el-dialog :title="state ? '添加学生信息' : '修改学生信息'"
 :visible.sync="dialogFormVisible" width="500px">
     <el-form :model="form" :rules="rules" ref="form">
         <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
             <el-input v-model="form.name" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
             <el-input v-model="form.age" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
             <el-radio v-model="form.sex" label="1">男</el-radio>
             <el-radio v-model="form.sex" label="2">女</el-radio>
         </el-form-item>
         <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop