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;
      }
    },
}
相关推荐
IT_陈寒12 小时前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion12 小时前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计
JavaGuide12 小时前
我用 Claude Code/ZCode+GLM-5.3 从零做了一款 Agent 游戏!
前端·后端
Eason_Lou12 小时前
vue flow使用注意事项
前端·vue.js
小赵同学WoW13 小时前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_13 小时前
C# 上位机(持续更新中)
前端·面试·c#
风雨_13 小时前
Git Worktree sourcetree完整使用指南
前端
半个落月13 小时前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
用户9210802628613 小时前
ChatComposer 输入区改造:基于技能市场实现 Agent 输入框
前端
用户459892045651613 小时前
一套 KMP 多仓库版本治理工作流:用 Version Catalog + CI 把发版流水线自动化
前端·kotlin