element-ui中的删除弹窗

最新推荐文章于 2024-09-14 08:30:00 发布

原创最新推荐文章于 2024-09-14 08:30:00 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue.js 同时被 3 个专栏收录

10 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

这篇博客介绍了如何使用公司封装好的删除弹窗事件。在删除按钮上直接绑定该事件，通过`beforeClose`阻止关闭弹窗，根据`action`判断用户点击的是确认还是取消。当点击确认时，设置`confirmButtonLoading`为true开始删除操作，完成后更新数据并关闭弹窗；点击取消则关闭弹窗。理解每个代码的作用能帮助更好地应用这个功能。

这是一个封装好的删除弹窗事件，直接在删除按钮上绑定就可以了

beforeClose 阻止关闭弹窗
action === “confirm” 表示点击确定按钮，反之点击取消
下面这行代码作用是表示点击了确定按钮，进入删除程序

     instance.confirmButtonLoading = true;

这行代码表示点击了弹窗的取消按钮，退出删除

    instance.confirmButtonLoading = false;

done 控制是否关闭弹窗
done()是关闭弹窗
done(false)阻止关闭弹窗
基本上都是公司封装好的，直接拿来用就可以了，但最好还是要理解每行代码的含义

  handleDel(row) {
            this.$confirm(`确定要删除该数据吗？`, {
                type: "warning",
                //beforeClose 阻止关闭弹窗
                beforeClose: (action, instance, done) => {
                    //下面这行代码就是弹出的确认删除和取消删除
                    if (action === "confirm") {
                        //这行代码作用是点击确定进入删除程序
                        instance.confirmButtonLoading = true;
                        detailsInfoDelete({ id: row.id }).then((res) => {
                            this.$message.success(res.message);
                            //点击弹窗的取消按钮
                            instance.confirmButtonLoading = false;
                            //重新获取数据
                            this.getList()
                            //done()关闭弹窗
                            done();
                        }).catch((err) => {
                            instance.confirmButtonLoading = false;
                        });
                    } else {
                        //点击其他地方时就相当于点击了false
                        done();
                    }
                },
            });
        },