学无先后,达者为师

网站首页 编程语言 正文

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

作者:乐~~~ 更新时间: 2023-07-28 编程语言

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

原文链接:https://blog.csdn.net/CMDN123456/article/details/129881544

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新