Elenment-UI 中如何阻止 Tabs 标签页的切换

在一些 Vue 项目中经常会遇到这样一个需求：在切换 tabs 页时，如果当前页面内容没有保存或者没有填写完，则拦截切换并提示必填校验信息。

一般类似于这样的流程模板：

---

一、解决方案

1.1 Element 官方中使用 before-leave 方法进行拦截：

1.2 使用 Promise 的方案来实现经过表单的验证进一步判断是否要拦截 Tabs 页切换

模板中的代码：

<el-tabs v-model="activeIndex" :tab-position="tabPosition" :before-leave="beforeTabLeave" >内容.....</el-tabs>

 

methods 中的代码：

//判断表单的校验是否通过
    formValidate() {
      let p = new Promise((resolve, reject) => {
        this.$refs.addFormRef.validate(async (valid) => {
          valid ? resolve() : reject();
          if (valid !== resolve()) {
            this.$message.error("请完善商品信息！");
          }
        });
      });
      return p;
    },
        
//回调formValidate()函数判断是否要阻止 Tag 标签的切换
    async beforeTabLeave() {
      return await this.formValidate();
    },

 

1.3 这里的返回值不用 false 或 true 使用为在一些场景中可能不能实现拦截，而是用 Promise 中的 resolve() 和 reject() 更稳定些。

 

二、实现效果

若基本信息没有填写完成或者没有进行保存在点击年度计划时就会被拦截