vue element-ui 删除时报错 Uncaught (in promise) cancel问题

清疚 2021-07-26 00:42 758阅读 0赞

## element-ui 删除弹窗处理 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
在删除数据的时候，需要有个弹窗提示是否删除，如果点击取消，则弹窗消失，如果点击确定，则调用删除接口。

this.$confirm("此操作将永久删除, 是否继续?", "提示", { 
      closeOnClickModal: false,
      type: "warning"
    }).then(() => { 
    //此处的del就是一个删除数据的接口，传递的数据就是row.id这个id唯一值
      del(row.id).then(() => { 
        this.getPage();
        this.$message.success("删除成功");
      });
    });

此时页面没有报错，但是控制台会报错：  
![在这里插入图片描述][202009241454055.png_pic_center]  
百度后，解决方法如下：

this.$confirm("此操作将永久删除, 是否继续?", "提示", { 
      closeOnClickModal: false,
      type: "warning"
    }).then(() => { 
      del(row.id).then(() => { 
        this.getPage();
        this.$message.success("删除成功");
      });
    }).catch(e => e);

以上代码中的.then是针对的点击”确定“按钮之后的代码，点击”取消“按钮走的代码没有写，可以使用.catch进行接收。代码不需要写任何东西，接收一下参数e即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/c37e54e96cc64b37ad918f7d08a6ebb5.png
[202009241454055.png_pic_center]: /images/20210725/52a7c66de30f4c46b12a6926a988944f.png