1.? ?添加方法? ?el-tabs?中自帶的，表示在切換之前執(zhí)行的方法

??

?2.?判斷條件

?源碼如下：

<template>
  <div
    class="maintenIndex"
    animated
  >
    <!-- @tab-click="handleClick" -->
    <el-tabs
      v-model="activeName"
      class="tabsStyle"
      :before-leave="beforeHandle"
    >
      <el-tab-pane
        label="周維護(hù)"
        style="height: 100%; width: 100%"
        name="first"
      >
        <indexSs title="周維護(hù)">
          <!-- 具名插槽的寫(xiě)法一 -->
          <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="月維護(hù)"
        style="height: 100%; width: 100%"
        name="second"
      >
        <indexSs title="月維護(hù)">
          <!-- 具名插槽的寫(xiě)法一 -->
          <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: {
    /**在下一步的頁(yè)面中，不能切換選項(xiàng)卡 */
    beforeHandle() {
      if (this.step != 1) {
        Notify({ type: "danger", message: "請(qǐng)先完成當(dāng)前維護(hù)登記" });
        return false;
      }
    },
  },
};
</script>

備注：?這個(gè)鏈接比較詳細(xì)，鄙人寫(xiě)的時(shí)候就是參考此文章。https://blog.csdn.net/yangwqi/article/details/106641375