element-ui中的删除d窗

element-ui中的删除d窗,第1张

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

beforeClose 阻止关闭d窗action === “confirm” 表示点击 确定按钮,反之点击取消下面这行代码作用是表示点击了确定按钮,进入删除程序
     instance.confirmButtonLoading = true;
这行代码表示点击了d窗的取消按钮,退出删除
    instance.confirmButtonLoading = false;
done 控制是否关闭d窗
done()是关闭d窗
done(false)阻止关闭d窗
基本上都是公司封装好的,直接拿来用就可以了,但最好还是要理解每行代码的含义
  handleDel(row) {
            this.$confirm(`确定要删除该数据吗?`, {
                type: "warning",
                //beforeClose 阻止关闭d窗
                beforeClose: (action, instance, done) => {
                    //下面这行代码就是d出的确认删除和取消删除
                    if (action === "confirm") {
                        //这行代码作用是点击确定进入删除程序
                        instance.confirmButtonLoading = true;
                        detailsInfoDelete({ id: row.id }).then((res) => {
                            this.$message.success(res.message);
                            //点击d窗的取消按钮
                            instance.confirmButtonLoading = false;
                            //重新获取数据
                            this.getList()
                            //done()关闭d窗
                            done();
                        }).catch((err) => {
                            instance.confirmButtonLoading = false;
                        });
                    } else {
                        //点击其他地方时就相当于点击了false
                        done();
                    }
                },
            });
        },

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1298967.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存