el-tab 如何点击不同标签触发不同函数

news2024/11/20 15:26:50

介绍
el-tab本身的功能是点击之后切换不同页,但是我希望点击不同标签就触发不同页

代码实现

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="User" name="User">User</el-tab-pane>
    <el-tab-pane label="Config" name="Config">Config</el-tab-pane>
  </el-tabs>
</template>


<script>
export default{
    data() {
        return {
            clickedTabs: {//这里是希望函数只被调用一次
                'User': false,
                'Config': false,
            },
         }
    },
    methods: {
        function1(){console.log('function1 was called')},
        function2(){console.log('function2 was called')},
        handleClick(tab, event) {
            if (!this.clickedTabs[tab.props.name]) {//这里是希望函数只被调用一次
                console.log('Clicked tab name: ' + tab.props.label);
                this.clickedTabs[tab.props.name] = true;//这里是希望函数只被调用一次
                // 根据tab的名字执行相应的操作
                switch (tab.props.name) {
                   case "User":
                        console.log('function1 BEGIN');
                        this.function1();
                        break;
                   case "Config":
                        console.log('function2 BEGIN');
                        this.function2();
                        break;
                }
            } 
            else {
                console.log(tab.props.name + ' tab was already clicked.');
            }
        },
    }
}
</script>

handleClick里面通过if来使得点击标签调用函数只被调用一次,如果不需要这个操作可以把相关代码注释掉,只留下switch函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1539684.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PTA L2-028 秀恩爱分得快

古人云&#xff1a;秀恩爱&#xff0c;分得快。 互联网上每天都有大量人发布大量照片&#xff0c;我们通过分析这些照片&#xff0c;可以分析人与人之间的亲密度。如果一张照片上出现了 K 个人&#xff0c;这些人两两间的亲密度就被定义为 1/K。任意两个人如果同时出现在若干张…

dash 初体验(拔草)

Dash简介 Dash 是一个高效简洁的 Python 框架&#xff0c;建立在 Flask、Poltly.js 以及 React.js 的基础上&#xff0c;设计之初是为了帮助前端知识匮乏的数据分析人员&#xff0c;以纯 Python 编程的方式快速开发出交互式的数据可视化 web 应用。 搭建环境 在学习 Dash 的…

深入理解Netty以及为什么项目中要使用?(七)Netty中ByteBuf详解

在Netty中&#xff0c;还有另外一个比较常见的对象ByteBuf&#xff0c;它其实等同于Java Nio中的ByteBuffer&#xff0c;但是ByteBuf对Nio中的ByteBuffer的功能做了很作增强&#xff0c;下面我们来简单了解一下ByteBuf。 下面这段代码演示了ByteBuf的创建以及内容的打印&#…

#Idea打包诺依 多模块项目遇到的问题

##诺依框架中遇到的问题 1. 打包部署出错 Please refer to /Users/zhang/code/giteeProjects/wms-ruoyi/ruoyi-generator/target/surefire-reports for the individual test results. Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [dat…

【技术栈】Redis 删除策略

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习技术栈 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8; 友情提供 目录 相关传送门 前言 1. 删除策略的目标 2. 数据删除策略 2.1 定时删除 2.2 惰性删除 2.3 定期删除…

智能财务新选择!Zoho Books入选福布斯榜单,助力中小企业!

放眼全球&#xff0c;中小企业始终是经济发展的重要组成部分。然而&#xff0c;由于中小企业的规模、流程规范和资源等方面受限较多&#xff0c;从而导致其在管理及运营上存在着诸多问题。其中包括财务管理不规范、成本控制不到位、运营效率低下等&#xff0c;这些问题则直接影…

freeRTOS动态内存heap4源码分析

1 前言 随着功能安全的推广&#xff0c;动态内存分配在RTOS领域的用武之地将越来越小。但heap4毕竟是为RTOS量身打造&#xff0c;相对简单&#xff0c;作为堆内存管理的入门学习&#xff0c;仍是很不错的选择。 1.1 标准c库动态内存函数的弊端 对于标准C库的malloc和free函数&…

2024年【安全员-A证】免费试题及安全员-A证作业考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【安全员-A证】免费试题及安全员-A证作业考试题库&#xff0c;包含安全员-A证免费试题答案和解析及安全员-A证作业考试题库练习。安全生产模拟考试一点通结合国家安全员-A证考试最新大纲及安全员-A证考试真题汇…

动态规划——斐波那契问题(Java)

目录 什么是动态规划&#xff1f; 练习 练习1&#xff1a;斐波那契数 练习2&#xff1a;三步问题 练习3&#xff1a;使用最小花费爬楼梯 练习4&#xff1a;解码方法 什么是动态规划&#xff1f; 动态规划&#xff08;Dynamic Programming&#xff0c;DP&#xff09;&…

8个国产全能型AI写作神器,给个标题就能自动生成全文 #其他#知识分享

国外ChatGPT爆火&#xff0c;AI写作在国内也引起不小的瞩目&#xff0c;目前国内的AI写作工具少说也有几十上百个&#xff0c;要在这么多AI写作中找出适合自己的工具&#xff0c;一个一个尝试是不太现实的&#xff0c;所以今天就给大家推荐一些款AI写作工具。帮助你少走弯路&am…

递归和递推的区别

目录 1、递推 2、递归 3、结言 递归 递推 1、递推 递推就是说从初值出发后一直运算到所需的结果。 ——从已知到未知。&#xff08;从小到大&#xff09; 举一个简单的例子&#xff1a; 每天能学习一个小时的编程&#xff0c;那么一个月之后可以学到三十小时的编程知识。…

SSL加密:保护数据传输的安全盾牌

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

尝试Docker Dev Environments

无法从本地目录创建容器环境 创建的容器环境无法在VS Code打开 从官方仓库打开 结果vscode报错。fine&#xff0c;告辞。老老实实用本地环境开发。

2024公认口碑最好的洗地机有哪些?若看重清洁力,这四款最值得买

每当我们要清洁卫生时&#xff0c;是否总是感到腰酸背痛、疲劳不堪&#xff0c;甚至头昏眼花&#xff1f;地板是家中的重要门面&#xff0c;不容忽视的卫生焦点。如今&#xff0c;我们终于多了一位家务打扫的救星——家用洗地地机。一次操作&#xff0c;即可完成扫地除尘、地除…

鸿蒙ArkUI【开发移植Carbon】

项目介绍 本项目是基于开源项目[Carbon] 进行harmonyos化的移植和开发的。 移植版本&#xff1a;Branches/master 这不是单纯只是API和基本功能展示demo&#xff0c;它是最有用的自定义控件的实现&#xff0c;如设计规范中所示。 Carbon试图&#xff1a; 让事情变得更简单&…

飞桨ONNX推理部署初探

ONNX&#xff0c;全称Open Neural Network Exchange&#xff08;开放神经网络交换&#xff09;&#xff0c;是一个用于表示深度学习模型的标准&#xff0c;它定义了一组与环境、平台均无关的标准格式。这使得不同的人工智能框架&#xff0c;如飞桨、MXNet等&#xff0c;可以采用…

【API调用gpt-4 (vision-preview)】基于微软的Azure OpenAI API

微软的Azure页面 &#xff1a; https://learn.microsoft.com/zh-cn/azure/ai-services/openai/concepts/models 调用代码&#xff1a;https://learn.microsoft.com/zh-cn/azure/ai-services/openai/how-to/switching-endpoints openai说明: https://platform.openai.com/docs/g…

Kubernetes kafka系列 | Strimzi 快速部署kafka集群 (可外部通信)

一、Strimzi介绍 Strimzi 是一个用于 Apache Kafka 在 Kubernetes 上部署和管理的开源项目。它提供了一组 Kubernetes 自定义资源定义(Custom Resource Definitions,CRDs)、控制器和操作符,使得在 Kubernetes 环境中轻松地部署、管理和操作 Kafka 集群成为可能。Strimzi 项…

[AIGC] 主流工作流引擎对比与适用场景介绍

主流工作流引擎对比与适用场景介绍 工作流引擎在业务流程管理中扮演着重要的角色&#xff0c;它可以帮助组织将复杂的工作流程自动化&#xff0c;降低错误率&#xff0c;提高工作效率。目前市面上有许多优秀的工作流引擎&#xff0c;各自都有着独特的优点和适用的场景。本文将介…

C++:类的6大默认成员函数(拷贝构造函数篇)

文章目录 1、拷贝构造函数的概念const用途 2、拷贝构造函数的特性浅拷贝/值拷贝 前言:Hello,大家好&#xff0c;咱这篇博客继续默认成员函数&#xff0c;今天的笔记分享为拷贝构造函数~ 1、拷贝构造函数的概念 在创建对象时&#xff0c;我们能否创建一个与已存在对象一某一样的…