【加餐 2】Tab 标签页管理

news2024/10/2 1:33:56

【加餐 2】Tab 标签页管理

对于管理系统,经常需要开启多个标签页,但是每次都需要手动去关闭,很麻烦,所以就有了这个功能,可以一键关闭所有标签页,或者关闭除当前标签页外的所有标签页,对于重要的标签页,可以进行固定至前列,方便下次快速打开。

一、实现效果

实现效果为:

  1. 关闭当前标签页:点击关闭 icon,关闭当前标签页。

  2. 右键唤出下拉菜单:

  • 固定当前标签页
  • 关闭其他标签页
  • 关闭所有标签页

在这里插入图片描述

二、实现思路

首先我们梳理一下思路(各步骤并不一定有先后顺序之别):

1、需要一个记录标签页的数组,用于存储标签页的信息,包括标签页的标题、路径、是否固定等信息。

2、循环遍历标签页数组,生成标签页。这里的标签页可以自定义,也可以使用 element-plus 的 tabs 组件,我这里省事直接使用了 element-plus 的 tabs 组件。

3、使用 el-dropdown 组件插入 el-tab-pane 的 label 中,并配置 trigger=“contextmenu”,实现右键唤出下拉菜单。

4、使用 pinia 管理标签页状态。将标签页数组存储在状态中,方便全局调用。

5、编写涉及到标签管

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

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

相关文章

论文浅尝 | 利用知识图谱增强的Transformer进行跨领域方面抽取

笔记整理:沈小力,东南大学硕士,研究方向为知识图谱链接:https://dl.acm.org/doi/pdf/10.1145/3511808.3557275动机情感分析是自然语言处理的基础任务,它包含介绍了细粒度情感分析中的一个常见任务——基于方面的情感分…

【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

文章目录一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析1、子绝父相2、显示隐藏元素对象3、鼠标经过样式设置4、半透明遮罩设置二、代码示例一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 1、子绝父相 这里要 在一个 div 盒子上方套一层遮罩 , 遮罩…

【原理图专题】OrCAD Capture 设计规则(DRC)检查

在原理图设计完成后,需要进行DRC检查,DRC检查能协助工程师快速检查原理图的物理、电气规则是否正确,能快速定位错误和原因。 DRC检查从Capture 工具栏中如下图红框所示的图标中Design Rules Check进入 进入后将打开DRC窗口,有四个选项卡。分别是Design Rules Options、Elec…

带你了解攻击与防护相关知识

目录 一、攻击篇 1.什么是恶意软件? 2.恶意软件有哪些特征? 3. 恶意软件的可分为那几类? 4. 恶意软件的免杀技术有哪些? 5. 反病毒技术有哪些? 6. 反病毒网关的工作原理是什么&#xff1f…

java计时器

在 Java中,我们有一个重要的概念:同步和异步。同步就是 Java中的线程安全,异步就是 Java中的线程非安全。 在使用 JVM时,我们一般都是用 start ()方法启动一个线程,然后设置时间,比如…

Android开发中,自定义注解的两种应用方式

java注解在Android开发中主要有两种使用方式;一种是在程序运行期间获取类的信息进行反射调用;另一种是使用注解处理,在编译期间生成相关代码,然后在运行期间通过调用这些代码来实现相关功能。 我们先了解一下注解的分类和关键字 …

前端实用js dom合集

1. 整个网页变为灰色主题,最外层加css样式:filter:grayscale(1) 黑色主题:filter:invert(1) 2.js剪辑视频片段制作gif动图: 效果:点击开始就开始录制,点击结束右边显示生成的gif动图 生成g…

Python程序异常处理

一、什么是异常 异常就是程序运行时发生错误的信号,在程序由于某些原因出现错误的时候,若程序没有处理它,则会抛出异常,程序也的运行也会随之终止; 程序异常带来的问题: 1.程序终止,无法运行…

浙大数据结构(1)

开始学习数据结构(拖了好久终于开干了) 来自【浙江大学】数据结构(合149讲)陈越 何钦铭 Be a Fighter and Keep Fighting!!! 数据结构(data structure)定义 是计算机中存储,组织数据的方法。通常情况下,精心选择的数据结构可以带…

Chapter7-吞吐量优先的使用场景

7.1 在 Broker 端进行消息过滤 在 Broker 端进行消息过滤,可以减少无效消息发送到 Consumer ,少占用网络带宽从而提高吞吐量。 Broker 端有三种方式进行消息过滤 。 7.1.1 消息的 Tag 和 Key 对一个应用来说,尽可能只用一个 Topic &#xff…

【数据结构学习3】线性表-链表、单链表

目录链式存储结构链表概念头结点的意义单链表的定义和表示单链表的基本操作链式存储结构 链表概念 概念 结点在存储器中的位置是任意的,即逻辑上相邻的数据元素在物理上不一定相邻。线性表的链式表示又称为非顺序映像或链式映像用一组物理位置任意的存储单元来存…

三公经费用泛微全过程数字化管理,使用有记录,付款有依据

公开透明是现代财政制度的重要准则和基本特征。组织要以公开、透明、科学的预算制度确定财政支出,贯穿预算编制、执行、监督全过程。 组织常见的费用管理——“三公”经费,通常指因公出国(境)费、公务用车购置及运行费、公务接待…

富士康转移3000亿产能,iPhone的印度产能倍增,不再“赏饭吃”

日前消息指今年三月份印度的iPhone产量已经是去年的四倍之多,占比将近7%,显示出苹果和富士康都在加速提升印度的iPhone产能,凸显出他们的决心,这对中国制造业将带来深远影响。一、富士康对中国制造影响巨大2021年的数据…

leetcode每日一题:数组篇(1/2)

😚一个不甘平凡的普通人,日更算法学习和打卡,期待您的关注和认可,陪您一起学习打卡!!!😘😘😘 🤗专栏:每日算法学习 💬个人…

key的作用和原理、列表过滤

一、key的作用与原理 虚拟DOM对象的标识。当状态中的数据发生变化时,vue会根据新数据生成新的虚拟DOM。随后vue进行新虚拟DOM与旧虚拟DOM的差异比较,规则如下:对比规则: 旧虚拟DOM中找到了与新虚拟DOM相同的key 若虚拟DOM中内容没…

Iceberg 数据湖是什么?数据湖能解决什么问题?独立于计算层和存储层之间的表格层?

Iceberg 数据湖是什么?数据湖能解决什么问题?独立于计算层和存储层之间的表格层?0. 导读1. Hive数仓遇到的问题2. 一种开放的表格式3. 自下而上的元数据4. 高性能的查询4.1 分区剪裁4.2 文件过滤4.3 RowGroup过滤参考:https://ice…

kafka-4 生产者和消费者

kafka的生产者和消费者四、 生产者4.1 分区分配策略4.2 副本和消息消费4.2.1 副本(AR、ISR、OSR)4.2.2 HW与LEO4.2.3 ISR 集合和 HW、LEO的关系五、消费者5.1 分区分配策略5.2 消费者offset的存储四、 生产者 4.1 分区分配策略 (1&#xff…

【20】linux进阶——linux的数据流和重定向

大家好,这里是天亮之前ict,本人网络工程大三在读小学生,拥有锐捷的ie和红帽的ce认证。每天更新一个linux进阶的小知识,希望能提高自己的技术的同时,也可以帮助到大家 另外其它专栏请关注: 锐捷数通实验&…

一、LED子系统框架分析

个人主页:董哥聊技术我是董哥,嵌入式领域新星创作者创作理念:专注分享高质量嵌入式文章,让大家读有所得!文章目录1、前言2、LED裸机处理3、LED子系统框架4、LED子系统目录结构及核心文件5、sysfs目录结构5.1 确保LED子…

低代码开发重要工具:私有化部署的jvs-logic的设计与价值

逻辑引擎介绍 逻辑引擎是一种能够处理逻辑表达式的程序,它能够根据用户输入的表达式计算出表达式的值。在实际应用中,逻辑引擎通常被用于处理规则引擎、决策系统、业务规则配置等领域,具有广泛的应用前景。 逻辑引擎如下图所示,在…