【加餐 2】Tab 标签页管理

本文介绍了如何使用Vue3、ElementUI和Pinia实现Tab标签页管理,包括记录标签页数组、生成标签页、下拉菜单操作等功能,提供了一键关闭所有标签页、关闭除当前标签页外的所有标签页以及固定标签页至前列的实现思路和步骤。
摘要由CSDN通过智能技术生成

【加餐 2】Tab 标签页管理

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

一、实现效果

实现效果为:

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

  2. 右键唤出下拉菜单:

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

在这里插入图片描述

二、实现思路

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

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值