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;
      }
    },
}
相关推荐
正在学习前端的---小方同学1 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享2 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键4 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ5 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python5 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep6 小时前
【前端】前端运行环境的结构
前端
你的人类朋友6 小时前
【Node】认识multer库
前端·javascript·后端
Aitter6 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front7 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'8 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css