element-UI 中beforeLeave用法

怼烎@ 2023-06-12 12:26 28阅读 0赞

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

在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
        },
        ```

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 java中++用法

x++和++x的运用 int x = 3; int y; x++; //或者++x System.out.println(x);

Dear 丶/ 2024年02月19日 14:53/ 0 赞/ 98 阅读

相关 element-UI 中beforeLeave用法

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

怼烎@/ 2023年06月12日 12:26/ 0 赞/ 29 阅读

相关 elementUI常用命令

package.json中可以查看elementUI的版本: "element-ui": "^2.7.2", 查看版本 npm list element-

╰+哭是因爲堅強的太久メ/ 2023年06月08日 04:36/ 0 赞/ 49 阅读

相关 Java中Calendar用法与Date用法（详细）

目录一、常用类Calendar Calendar 编程实例二、常用类Date Date 编程实例 -------------------- 一、常用类Cale

素颜马尾好姑娘i/ 2022年09月10日 06:09/ 0 赞/ 225 阅读

相关 php中的each()用法和list()用法

each()中将数组中当前元素的键名和键值 each() 函数返回当前元素的键名和键值，并将内部指针向前移动。该元素的键名和键值会被返回带有四个元素的数组中。两个元素（1

╰半橙微兮°/ 2022年07月18日 05:29/ 0 赞/ 305 阅读

相关 mysql中top用法

mysql数据库不支持top用法，如果想实现类似top的功能需要这么使用：select \ from tablename limit a,b a是表示从第（a+1）条记

谁借莪１个温暖的怀抱￠/ 2022年03月20日 18:50/ 0 赞/ 523 阅读

相关 vue 中用法

1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(inde

我不是女神ヾ/ 2021年12月03日 15:07/ 0 赞/ 470 阅读

相关 python中yield用法

出自：[Leon的博客][Leon] yield关键字用来定义生成器（Generator），其具体功能是可以当return使用，从函数里返回一个值，不同之处是用yield返回

深藏阁楼爱情的钟/ 2021年09月13日 20:52/ 0 赞/ 512 阅读

相关 Sql中CHARINDEX用法

`CHARINDEX`作用写SQL语句我们经常需要判断一个字符串中是否包含另一个字符串，但是SQL SERVER中并没有像C\提供了`Contains`函数，不过SQL

妖狐艹你老母/ 2021年07月04日 14:10/ 0 赞/ 619 阅读

相关 JS中__doPostBack用法

要理解`__doPostback`函数的用法，首先我们要理解`Asp.net` 中服务端控件事件是如何触发的。 `Asp.net` 中在客户端触发服务端事件分为三种情况：

电玩女神/ 2021年06月26日 16:06/ 0 赞/ 1182 阅读