之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之。然而实际解决却是相当简单的。

一、问题描述

在element UI的tabs组件中,假设需要在tab切换时执行某个函数,有什么方案?

二、问题举例

有两个tab,tab1和tab2,两个tab都有一个el-select组件,分别是el-select1和el-select2。el-select1和el-select2绑定了同一个字段,但是两者的下拉选项不相同。在切换tab时将导致以下问题:

1. 显示tab1中内容时,a的值是el-select1中某一下拉选项的值,但这个值在el-select2中不存在;反过来切换也是一样。
2. 这将使得切换tab时,el-select1或者el-select2中出现错误的下拉选项。

三、常用误区:通过事件解决

最容易想到的是采用tab-clik事件,但它的两个回调参数无法获取到切换前的tab实例,因此无法判断是否发生了tab切换。

四、解决方案:

采用before-leave钩子,它是el-tabs的一个一个属性,注意是属性而不是事件。给该属性绑定一个函数,则在触发tab切换时将执行绑定的函数。该钩子将在tab-clik之前执行。

它和tab-click的区别可总结如下:
1. tab-click在点击tab时就会触发,不论是否切换tab。
2. before-leave只在tab切换时触发。
3. 两者都触发时,before-leave先触发。

五、代码案例

      <el-tabs :before-leave='leaveTab'>
<el-tab-pane label="主合同" name="False"></el-tab-pane>
<el-tab-pane label="子合同" name="True"></el-tab-pane>
</el-tabs> leaveTab(activeName, oldActiveName) {
// do something
},
```

element UI排坑记(一):判断tabs组件是否切换的更多相关文章

  1. 表单编辑时el-form的validate方法执行无效,阻塞代码运行 - Element UI踩坑记录

    今天在用element-ui写管理后台需求时,遇到一个奇怪的问题 一个正常带校验的表单,在新增列表数据时表单校验功能正常: 但是在新增之后再去编辑数据时,表单校验却失效了,甚至阻塞了后续的代码执行,控 ...

  2. Selenium踩坑记之iFrame的定位与切换

    转自:https://www.jianshu.com/p/6e7d0359e4bb Selenium是浏览器自动化测试的工具之一,用过的人都懂他的好,也被他坑的不要不要的.今天就聊聊Selenium的 ...

  3. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  4. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  5. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  6. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  7. Vue 脱坑记

    问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...

  8. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  9. WinUI 3 踩坑记:从创建项目到发布

    本文是 WinUI 3 踩坑记 的一部分,该系列发布于 GitHub@Scighost/WinUI3Keng,若内容出现冲突以 GitHub 上的为准. 创建项目 现在 WinUI 3 的入门体验比刚 ...

随机推荐

  1. js 中对于this 的理解的 经典案例

    function Foo(){ getName = function(){console.log(1);}; return this; }Foo.getName = function(){consol ...

  2. day 1 硬件组成概念及介绍笔记

    一.服务器的种类: 硬件服务器: 1.机架式服务器 2.刀片式服务器 3.塔式服务器 虚拟服务器: 阿里云 aws 腾讯云 二.详细硬件组成: 1.电源  ----心脏(供电) 冗余特性    ups ...

  3. PTA数据结构与算法题目集(中文) 7-42整型关键字的散列映射 (25 分)

    PTA数据结构与算法题目集(中文)  7-42整型关键字的散列映射 (25 分) 7-42 整型关键字的散列映射 (25 分)   给定一系列整型关键字和素数P,用除留余数法定义的散列函数将关键字映射 ...

  4. Python起步学习

    Python起步学习 案例1:程序输入输出 案例2:判断合法用户 安全3:编写判断成绩的程序 1 案例1:程序输入输出 1.1 问题 编写login.py脚本,实现以下目标: 提示用户输入用户名 将用 ...

  5. linux安装常用软件和查询基本信息

                                                                          linux安装常用软件和查询基本信息 1. 安装常用软件 [ ...

  6. MyBatis(七):使用注解替代xml文件

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  7. 原来rollup这么简单之插件篇

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 计划 rollup系列打算一章一章的放出 ...

  8. 家庭版记账本app开发进度。开发到现在整个app只剩下关于图表的设计了,具体功能如下

    首先说一下自己的功能: 实现了用户的登录和注册.添加收入记账和添加支出记账.粗略显示每条账单基本情况.通过点击每条账单来显示具体的情况, 之后就是退出当前用户的操作. 具体的页面情况如下: 这就是整个 ...

  9. Java相同id的数据集合,合并数据为一条,并将几个字段内容合并为一个

    Java实现,当然也可以数据库实现; /** * Created by shaozhiqi on 2019/7/31. */ public class TestUnion { @Test public ...

  10. 多线程高并发编程(3) -- ReentrantLock源码分析AQS

    背景: AbstractQueuedSynchronizer(AQS) public abstract class AbstractQueuedSynchronizer extends Abstrac ...