el-tabs 切换之前判断是否满足条件，不满足则提示用户，不能切换

原创已于 2023-03-31 15:40:51 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-31 15:39:23 首次发布

vue 同时被 2 个专栏收录

69 篇文章

订阅专栏

elementui

47 篇文章

订阅专栏

文章展示了如何在Vue.js应用中使用ElementUI的el-tabs组件，并利用:before-leave钩子函数来执行切换标签页之前的逻辑，确保用户完成当前操作。示例代码包含了条件判断，如果未完成当前维护登记，则阻止切换并显示警告信息。

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

1. 添加方法 el-tabs 中自带的，表示在切换之前执行的方法

2. 判断条件

源码如下：

<template>
  <div
    class="maintenIndex"
    animated
  >
    <!-- @tab-click="handleClick" -->
    <el-tabs
      v-model="activeName"
      class="tabsStyle"
      :before-leave="beforeHandle"
    >
      <el-tab-pane
        label="周维护"
        style="height: 100%; width: 100%"
        name="first"
      >
        <indexSs title="周维护">
          <!-- 具名插槽的写法一 -->
          <template slot="one">
            <weeklyMainten
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <weeklyCheck
              v-if="step == 'weeklyCheck'"
              :data="equipTableData"
            />
            <weeklyGZ
              v-if="step == 'weeklyGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>
      <el-tab-pane
        label="月维护"
        style="height: 100%; width: 100%"
        name="second"
      >
        <indexSs title="月维护">
          <!-- 具名插槽的写法一 -->
          <template slot="one">
            <monthMainten
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <monthCheck
              v-if="step == 'monthCheck'"
              :data="equipTableData"
            />
            <monthGZ
              v-if="step == 'monthGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>
      
    </el-tabs>
  </div>
</template>
<script>
//周;
import weeklyMainten from "./weeklyMainten.vue";
import weeklyCheck from "../DetailTable/weeklys/weeklyCheck.vue";
import weeklyGZ from "../DetailTable/weeklys/weeklyGZ.vue";

/**月 */
import monthMainten from "./monthMainten.vue";
import monthCheck from "../DetailTable/months/monthCheck.vue";
import monthGZ from "../DetailTable/months/monthGZ.vue";


import indexSs from "./indexSs.vue";
/**引入Notifi ，这是vant里面的提示消息*/
import { Notify } from "vant";   
export default {
  // inject: ["reload"],
  data() {
    return {
      activeName: "first",
      step: "1",
      equipTableData: {},
    };
  },
  components: {
    weeklyMainten,
    monthMainten,
    indexSs,
    weeklyCheck,
    weeklyGZ,
    monthCheck,
    monthGZ,
    
  },
  create() {},
  mounted() {
    this.$bus.$on("step", (data) => {
      this.step = data.step;
      if (data.data) {
        this.equipTableData = data.data;
      }
    });
  },
  destroyed() {
    this.$bus.$off("updateShowSide");
  },
  methods: {
    /**在下一步的页面中，不能切换选项卡 */
    beforeHandle() {
      if (this.step != 1) {
        Notify({ type: "danger", message: "请先完成当前维护登记" });
        return false;
      }
    },
  },
};
</script>

备注：这个链接比较详细，鄙人写的时候就是参考此文章。https://blog.csdn.net/yangwqi/article/details/106641375