Element UI 防止多次提交数据

场景：Table 列表中 【执行】操作，点击【执行】显示弹框，提交时，多次点击【确定】按钮，可以多次提交数据；

需求：点击 【确定】时，不能再次重复点击，直到 API 返回。

实现方式：在提交数据调用 api 和 更新列表数据之间添加一个 loading 的效果，直到 api 返回。

 

1、按钮点击时触发的事件 @click="submit"

<el-button type="success" @click="submit">确定</el-button>

2、点击事件中添加提示 loading 

submit () {
    const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
        target: document.querySelector(".submit-dialog") // .submit-dialog 指的是 el-dialog 的 class
    });
}

3、点击事件处理结束之后，关闭 loading

loading.close()

关闭之后 loading 效果，即可更新列表数据。