el-tabs的上方目录栏增加自定义按钮

news2024/11/19 1:33:10

需求如图:需要在el-tabs的最右侧加一个自定义按钮,它不属于el-tab-pane,而且要在最右侧。这时候就要使用定位来完成这个按钮的显示。
在这里插入图片描述
代码结构如下:自定义按钮要与el-tabs的层级并列,然后通过css设置custom-btn的定位样式
在这里插入图片描述

.tabs-wrapper {
  position: relative;
}
.custom-btn {
  position: absolute;
  top: 6px;
  right: 20px;
}

其实是custom-btn距离它外层包裹的div内部上方6px,然后刚好就显示在el-tabs上,是视觉效果,并不是直接在el-tabs内部放自定义按钮。

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

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

相关文章

15、分布式锁简介

一 分布式锁简介 分布式锁:满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁,只要大家使用的是同一把锁,那么我们就能锁住线程,不让线程进行,让程序串行执行&#xf…

2023.8-java-基本语法

基本语法 编写 Java 程序时,应注意以下几点: 大小写敏感:Java 是大小写敏感的,这就意味着标识符 Hello 与 hello 是不同的。类名:对于所有的类来说,类名的首字母应该大写。如果类名由若干单词组成&#x…

nginx(七十七)nginx与包体的探究

一 nginx与body体 说明:本文不具有生产意义,只是为了nginx知识的闭环,可以跳过即可 --> "数据脱敏"题外话: 对body的CURD,nginx和openresty处理方式不同强调: 本文是基于http演示的,如果是https加密我们是看不到的 ① core模…

博客系统之功能测试

博客系统共有:用户登录功能、发布博客功能、查看文章详情功能、查看文章列表功能、删除文章功能、退出功能 1.登录功能: 1.1测试对象:用户登录 1.2测试用例 方法:判定表 用例 编号 操作步骤预期结果实际结果截图1 1.用户名正确…

安全学习DAY18_信息打点-APP资产搜集

信息打点-APP资产&静态提取&动态抓包&动态调试 文章目录 信息打点-APP资产&静态提取&动态抓包&动态调试本节知识&思维导图本节使用到的链接&工具 如何获取目标APP从名称中获取APP从URL获取APP APP搜集资产信息APP提取信息分类信息提取方式信息…

常用的电参数

电参数根据电流的特点可以分为直流电参数和交流电参数,在电参数中有些是可以通过电参数表测得,有些参数则为通过测得的参数计算而来。 一、电参数 1.1 直接可测电参数 ——瞬时电压值 ——瞬时电流值 n——采样点数 f——频率 time——时间 其中&…

使用IText导出复杂pdf

1、问题描述 需要将发票导出成pdf&#xff0c;要求每页都必须包含发票信息和表头行。 2、解决方法 使用IText工具实现PDF导出 IText8文档&#xff1a;Examples (itextpdf.com) 3、我的代码 引入Itext依赖&#xff0c;我这里用的是8.0.1版本 <dependency><groupId>…

基于阿里云 Flink+Hologres 搭建实时数仓

摘要&#xff1a;本文作者阿里云 Hologres 高级研发工程师张高迪&阿里云 Flink 技术内容工程师张英男&#xff0c;本篇内容将为您介绍如何通过实时计算 Flink 版和实时数仓 Hologres 搭建实时数仓。 Tips&#xff1a;点击「阅读原文」免费领取 5000CU*小时 Flink 云资源 背…

Linux Debian12命令终端安装pip install rsa报错error: externally-managed-environment

Linux Debian12在命令终端安装pip install rsa出现error: externally-managed-environment错误,如下图&#xff1a; 仔细读了一下报错内容才搞懂&#xff0c;原来是Debian12安装Python包时需要使用apt install python3-包名&#xff0c;例如安装rsa&#xff0c;使用sudo apt …

太阳能的发展与应用

目录 1.太阳能的概念 2.太阳能的原理 3.太阳能的发展过程 4.太阳能的普及对人类的作用 1.太阳能的概念 太阳能是指利用太阳辐射能的能源。太阳能可以分为两种利用方式&#xff1a;热能和光能。 太阳能热能是指将太阳辐射的热能直接转化为热能供人们使用。这种利用方式包括太…

导出Excel一些格式、样式的 代码

1.合并单元格 // 合并单元格&#xff08;开始行, 结束行, 开始列, 结束列&#xff09;CellRangeAddress regionRow0 new CellRangeAddress(0, 0, 0, 10);sheet.addMergedRegion(regionRow0);2.单元格根据汉字自动匹配颜色 HSSFConditionalFormattingRule orange scf.createCo…

SE24维护类、接口interface(如何看懂CO03事务码对应的abap代码)

我想读懂CO03这个事务码的代码。 也不是全都读懂&#xff0c;只要读懂其中一小部分就可以了。如下图&#xff1a; 记入文档的货物移动。 现在已经大概知道了这种SAP系统自带事务码的代码结构&#xff0c;因为我想看懂的部分&#xff0c;毕竟是其中最简单的部分-----ALV&#…

大疆mini 3 Pro 手工拍摄倾斜摄影照片, 利用WebODM 制作老房子的模型

最近比较着迷于无人机&#xff0c; 因此也研究了一些无人机图片的处理技术&#xff0c; 对于航空倾斜摄影的图片处理&#xff0c; 发现WebODM 这个开源软件确实不错&#xff0c; 利用手里的大疆mini 3 pro&#xff0c; 手动拍摄了一些关于家里的老房子的照片&#xff0c; 最后果…

MFC140.dll缺失的修复方法,安装MFC140.dll文件

大家好&#xff0c;今天我要和大家分享的是如何正确安装和使用MFC140.dll。MFC140.dll是一种常见的动态链接库文件&#xff0c;它是Microsoft Foundation Classes(MFC)的一部分&#xff0c;被广泛应用于Windows操作系统中的各种应用程序中。在本文中&#xff0c;我们将详细介绍…

什么是高度塌陷?

目录 高度塌陷 解决高度塌陷的方法 由于前面将高度塌陷和外边距重叠搞混&#xff0c;现在重新写一下高度塌陷 高度塌陷 在文档流中&#xff0c;父元素的高度默认是被子元素撑开的&#xff0c;也就是子元素多高&#xff0c;父元素就多高。但是当为子元素设置浮动以后&#xff…

win10的pycharm开发工具使用Jupyter的各种报错:环境问题

一、问题 在win10系统的pycharm开发工具使用Jupyter的各种报错&#xff0c;却一直解决不了。 我一度使用过购买云服务器、重装系统等等各种办法&#xff0c;都没能解决。 例如&#xff1a;在speech_processing.ipynb文件中 import librosa y, sr librosa.load(C:/Test/000…

基于Forcite模块的分子动力学研究药剂与矿物相互作用实例(一)

关键词&#xff1a;相互作用 MS Forcite 分子动力学 径向分布 笔名&#xff1a;杨过 Forcite模块是分子动力学计算的主要模块&#xff0c;研究范围广&#xff0c;可以对多种周期性体系进行计算分析&#xff0c;在矿物分选领域中主要是计算分析药剂与矿物相互作用&#xff0…

ROS2中的roscd命令

一、问题 最近在学习ROS2&#xff0c;环境搭建好后想查看下某个包的内容&#xff0c;在ROS里面习惯用roscd直接进入&#xff0c;但在ROS2里面没有这个命令 二、解决办法 目前网上的相关资料比较少&#xff0c;博客1中提到ROS2中需要使用colcon_cd来替代roscd&#xff0c;不过…

LeetCode 热题 100(五):54. 螺旋矩阵、234. 回文链表、21. 合并两个有序链表

题目一&#xff1a; 54. 螺旋矩阵https://leetcode.cn/problems/spiral-matrix/ 题目要求&#xff1a; 思路&#xff1a;一定要先找好边界。如下图 &#xff0c;上边界是1234&#xff0c;右边界是8、12&#xff0c;下边界是9、10、11&#xff0c;左边界是5&#xff0c;所以可…

机器人TF坐标系变换与一些可视化工具的应用

TF坐标在ROS中是一个非常重要的概念&#xff0c;因为机器人在做日常操作任务的时候&#xff0c;对于其所在位置和朝向是需要时刻知道的&#xff0c;而机器人是由很多节点组成的协同任务&#xff0c;对于每个部件&#xff0c;我们需要知道它的位姿(位置和朝向)&#xff0c;这使得…