当前位置: 首页 > article >正文

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

   <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>

关键代码: 

 

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

 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;
      }
    },
}


http://www.kler.cn/a/427976.html

相关文章:

  • Java开发vscode环境搭建
  • 毕业设计--具有车流量检测功能的智能交通灯设计
  • 【C++高并发服务器WebServer】-9:多线程开发
  • volatile
  • python算法和数据结构刷题[2]:链表、队列、栈
  • 软件工程概论试题三
  • docker-3.docker权限问题
  • 开发一个AMT(automatic multicast tunnel)协议库 C++版本,Client,Server详细的设计
  • STM32F103单片机使用STM32CubeMX创建IAR串口工程
  • mac 安装python3和配置环境变量
  • 【Leetcode Top 100】146. LRU 缓存
  • Octo—— 基于80万个机器人轨迹的预训练数据集用于训练通用机器人,可在零次拍摄中解决各种任务
  • 网络资源模板--Android Studio 实现绿豆通讯录
  • 【springboot】 多数据源实现
  • 塑胶模具基本结构及塑胶成型原理
  • ubuntu 使用USB转TTL线连接树莓派4B
  • 【Android】ARouter源码解析
  • Python 信息科技赛课区一等奖教案(语音合成技术)
  • 【Elasticsearch】初始化默认字段及分词
  • Python中的数据可视化实战
  • spring-boot-starter-validation校验启动器简述
  • 基于SpringBoot校园台球厅人员与设备管理系统设计与实现
  • JavaScript Server-Sent Events (SSE) 教程
  • 国产GPU中,VLLM0.5.0发布Qwen2.5-14B-Instruct-GPTQ-Int8模型,请求返回结果乱码
  • 宝塔控制面板phpMyadmin打开卡主加载中状态
  • Spring Boot教程之二十一:文件处理