element-ui后台管理系统学习(6)-新增/编辑代码合并

桃扇骨 2021-08-02 22:50 273阅读 0赞

在开发中，我们会经常遇到 **新增 **和 **修改 **两种不同的情况，但是他们往往又有类似的逻辑。此时，我们使用一套代码进行封装，在调用相同的函数，完成2种不同的逻辑处理，开发实例如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

需求说明：在进行相册管理的时候，我们会有两种处理方式：新建相册与编辑相册。

--------------------

**一、修改部分**

***html ***

思路分析：

1、对已有的相册列表进行编辑的时候，***@click.stop.native = 'openAlbumModel(\{item, index\})'***；其中click.stop.native因为框架封装，需要使用***stop阻止默认事件，native触发原生事件***；openAlbumModel打开新建/修改的对话框，使用出入的对象来区分新建还是修改；

**二、新建部分**

<el-button type="success" size="mini" @click="openAlbumModel(false)">创建相册</el-button>

思路分析：

2、新建是 **openAlbumModel(false)**，传值为false，修改是 **openAlbumModel(\{item, index\})**，传值当前点击的对象与索引。

--------------------

***js***

// 打开对话框
        openAlbumModel(obj) {
          // 修改
          if (obj) {
            let { item, index } = obj;
            //   初始化表单
            this.albumForm.name = item.name;
            this.albumForm.order = item.order;
            this.albumEditIndex = index;
            this.albumModel = true;
            return;
          }
          // 创建
          this.albumForm = {
            name: "",
            order: 0
          };
          this.albumEditIndex = -1;
          this.albumModel = true;
        },
    
        // 点击确定修改/创建相册
        confirmAlbumModel() {
          // 判断是否为修改
          if (this.albumEditIndex > -1) {
            this.albumEdit();
            this.albumModel = false;
            return
          }
          this.albums.unshift({
              name:this.albumForm.name,
              order:this.albumForm.order,
              num:0
          })
          this.albumModel = false;
        },
    
        // 编辑相册
        albumEdit() {
          this.albums[this.albumEditIndex].name = this.albumForm.name;
          this.albums[this.albumEditIndex].order = this.albumForm.order;
        },

备注：在新建与修改使用同一个对话框的时候，我们定义一个新的变量**albumEditIndex = -1**时表示**新建**，albumEditIndex > -1时表示**修改。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/949daf16a2db4f33bd4d92dc823c3806.png