el-tabs 标签页判断是否拦截切换，el-tabs页面切换拦截失败

最新推荐文章于 2025-06-05 11:39:56 发布

原创最新推荐文章于 2025-06-05 11:39:56 发布 · 6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

本文介绍了在 Vue.js 中使用 `el-tabs` 组件时如何通过 `before-leave` 事件来拦截标签页切换，并在切换前提示用户保存数据。作者遇到了在切换过程中数据加载顺序问题，通过将 `tab-click` 功能移至 `before-leave` 事件中解决。此外，还提到了必须使用 `async/await` 和 `Promise` 的 `resolve()`、`reject()` 来正确控制流程，避免标签页提前切换。文章提供了完整的代码示例，展示了如何在确认操作后加载不同 pane 页面的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在切换tabs前先提示用户是否已保存数据，然后再切换

before-leave：切换标签前的属性事件，拦截tabs切换

踩坑

1、在tab切换时，还需要获取部分pane的数据。最初是同时使用 tab-click 和 before-leave ，但是会出现还未确认是否跳转，就已经加载 active Pane页面的数据了（先执行了tab-click）。解决方法是将tab-click要实现的功能放到before-leave事件中。

2、before-leave的方法需要使用async await 不然会出现先切换标签页后弹出提示框

3、使用 return false 拦截切换时无效，然后看到下面这篇文章说要使用 reslove() 和 reject() 代替true 和false。实测使用 reject() 有效，但是reslove() 无效，不知道为什么

el-tabs 判断拦截阻止切换标签_范特西是只猫的博客-CSDN博客

完整代码

<el-tabs type="border-card" :stretch="true" v-model="activeName" :before-leave="confirmLeave">
  <el-tab-pane label="失效机理综述" name="first">失效机理综述</el-tab-pane>
  <el-tab-pane label="技术规范文件文件" name="five">技术规范文件文件</el-tab-pane>
  <el-tab-pane label="故障树" name="second">故障树</el-tab-pane>
  <el-tab-pane label="作业单题目列表" name="third">故障树</el-tab-pane>
  <el-tab-pane label="检验项目列表" name="fourth">故障树</el-tab-pane>
</el-tabs>

    async confirmLeave(active, old) {
      await this.$confirm('请确认您已保存当前页面数据, 是否继续跳转?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("tab-click事件")
        if (active == 'first') {
          //获取first pane 页面数据
          this.getList0();
        } else if (active == 'third') {
          //获取third pane 页面数据
          this.getList3();
        } else if (active == 'fourth') {
          //获取fourth pane 页面数据
          this.getList4();
        }
        return true;
      }).catch(() => {
        return reject()
      });
    },