element UI排坑记(一):判断tabs组件是否切换
之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之。然而实际解决却是相当简单的。
一、问题描述
在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组件是否切换的更多相关文章
- 表单编辑时el-form的validate方法执行无效,阻塞代码运行 - Element UI踩坑记录
今天在用element-ui写管理后台需求时,遇到一个奇怪的问题 一个正常带校验的表单,在新增列表数据时表单校验功能正常: 但是在新增之后再去编辑数据时,表单校验却失效了,甚至阻塞了后续的代码执行,控 ...
- Selenium踩坑记之iFrame的定位与切换
转自:https://www.jianshu.com/p/6e7d0359e4bb Selenium是浏览器自动化测试的工具之一,用过的人都懂他的好,也被他坑的不要不要的.今天就聊聊Selenium的 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- [坑况]饿了么你是这样的前端——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/ ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...
- Vue 脱坑记
问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- WinUI 3 踩坑记:从创建项目到发布
本文是 WinUI 3 踩坑记 的一部分,该系列发布于 GitHub@Scighost/WinUI3Keng,若内容出现冲突以 GitHub 上的为准. 创建项目 现在 WinUI 3 的入门体验比刚 ...
随机推荐
- js 中对于this 的理解的 经典案例
function Foo(){ getName = function(){console.log(1);}; return this; }Foo.getName = function(){consol ...
- day 1 硬件组成概念及介绍笔记
一.服务器的种类: 硬件服务器: 1.机架式服务器 2.刀片式服务器 3.塔式服务器 虚拟服务器: 阿里云 aws 腾讯云 二.详细硬件组成: 1.电源 ----心脏(供电) 冗余特性 ups ...
- PTA数据结构与算法题目集(中文) 7-42整型关键字的散列映射 (25 分)
PTA数据结构与算法题目集(中文) 7-42整型关键字的散列映射 (25 分) 7-42 整型关键字的散列映射 (25 分) 给定一系列整型关键字和素数P,用除留余数法定义的散列函数将关键字映射 ...
- Python起步学习
Python起步学习 案例1:程序输入输出 案例2:判断合法用户 安全3:编写判断成绩的程序 1 案例1:程序输入输出 1.1 问题 编写login.py脚本,实现以下目标: 提示用户输入用户名 将用 ...
- linux安装常用软件和查询基本信息
linux安装常用软件和查询基本信息 1. 安装常用软件 [ ...
- MyBatis(七):使用注解替代xml文件
本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...
- 原来rollup这么简单之插件篇
大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 计划 rollup系列打算一章一章的放出 ...
- 家庭版记账本app开发进度。开发到现在整个app只剩下关于图表的设计了,具体功能如下
首先说一下自己的功能: 实现了用户的登录和注册.添加收入记账和添加支出记账.粗略显示每条账单基本情况.通过点击每条账单来显示具体的情况, 之后就是退出当前用户的操作. 具体的页面情况如下: 这就是整个 ...
- Java相同id的数据集合,合并数据为一条,并将几个字段内容合并为一个
Java实现,当然也可以数据库实现; /** * Created by shaozhiqi on 2019/7/31. */ public class TestUnion { @Test public ...
- 多线程高并发编程(3) -- ReentrantLock源码分析AQS
背景: AbstractQueuedSynchronizer(AQS) public abstract class AbstractQueuedSynchronizer extends Abstrac ...