Vue管理系统项目—骚操作：添加和修改共用一个弹窗（封装方法让代码水平跃升N个台阶）

文章结构概述

• 引言
  • • 采用统一的弹窗界面
    • 统一调用请求函数
    • 亮点—请求方法的封装处理

  • 结尾

前言

在管理系统的设计与开发过程中，表格数据的新增与删除操作属于高频实现功能。通常情况下，多数开发者倾向于采用两个独立的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-i