ElementUI:el-tabs 切换之前判断是否满足条件

html 复制代码
   <div class="table-card">
      <div class="card-steps-class">
        <el-tabs
          v-model="activeTabsIndex"
          :before-leave="beforeHandleTabsClick"
        >
          <el-tab-pane name="1" label="基础设置">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="基础设置 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>基础设置</span>
              </span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="2" label="流程设计">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="流程设计 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>流程设计</span>
              </span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="3" label="高级设置">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="高级设置 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>高级设置</span>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>

关键代码:

增加业务逻辑,调用子组件表单验证~~~

TypeScript 复制代码
 methods: {
    beforeHandleTabsClick: function (index) {
      if (this.activeTabsIndex === "1" && (index === "2" || index === "3")) {
        let reValidState = this.$refs.baseForm.sumbitForm();
        if (reValidState) {
          this.activeTabsIndex = index;
          return true;
        }
        return false;
      } else if (
        this.activeTabsIndex === "2" &&
        (index === "1" || index === "3")
      ) {
        return true;
      }
    },
}
相关推荐
羊羊小栈10 分钟前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
jump_jump1 小时前
超长定时器 long-timeout
前端·javascript·node.js
Mintopia2 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia2 小时前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年2 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿2 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户1456775610373 小时前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife3 小时前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan3 小时前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户1456775610373 小时前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端