使用el-tab,el-tab-pane循环使用循环后不显示下划线问题

在vue项目中使用element-UI el-tab里的el-tab-pane是循环出来的,但是循环出来后选中tab不显示下划线了

文章目录

  • 问题
    • 问题展示效果
    • 问题代码
    • 问题原因
  • 解决方案
    • 解决后效果
    • 解决方案1代码
  • 解决方案2代码

问题

问题展示效果

在这里插入图片描述

问题代码

        <el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id ">{{ item.name }}</el-tab-pane></el-tabs>

问题原因

在这里插入图片描述
el-tabs__active-bar is-top 元素宽度为0

解决方案

解决后效果

在这里插入图片描述

解决方案1代码

在方法里设置固定宽度

 _this.$nextTick(_ => {const activeBarElement = document.getElementsByClassName('el-tabs__active-bar')[0]activeBarElement.style.width = '104px';})

解决方案2代码

给name添加一个空字符串

        <el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id + ''">{{ item.name }}</el-tab-pane></el-tabs>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java.lang.NoClassDefFoundError: org/dom4j/io/SAXReader

问题描述&#xff1a;在maven项目中&#xff0c;给SAXReader创建实例&#xff0c;启动tomcat服务器后报异常java.lang.NoClassDefFoundError: org/dom4j/io/SAXReader。我在pom文件中是引入了dom4j依赖得&#xff0c;但是不知道为什么在上传到web时就找不到了 解决办法&#x…

Java通过Html(ftl模板)生成PDF实战, 可支持商用

Java通过Html(freemarker模板)生成PDF实战, 可支持商用 技术架构 springboot freemarker [pdfbox] flying-saucer-pdf 生成流程&#xff1a; freemarker: 根据数据填充ftl模板文件&#xff0c;得到包含有效数据的html文件&#xff08;包含页眉页脚页码的处理&#xff0c…

迁移ISE ChipScope逻辑分析器到Vivado硬件管理器

迁移ISE ChipScope逻辑分析器到Vivado硬件管理器 介绍 本章介绍AMD Vivado™Design Suite硬件管理器&#xff0c;以及这些工具之间的关系 到ISE™设计套件ChipScope™逻辑分析器工具&#xff0c;以及如何迁移IP核 从ISE ChipScope环境到Vivado Design Suite。 Vivado硬件管理器…

前端Vue小兔鲜儿电商项目实战Day05

一、登录 - 整体认识和路由配置 1. 整体认识 登录页面的主要功能就是表单校验和登录退出业务 ①src/views/Login/index.vue <script setup></script><template><div><header class"login-header"><div class"container m-…

数组的应用-24点游戏

目录 24点游戏 游戏规则 游戏主要分为三部分 电脑出牌 用户输入算式 电脑判断胜负 总结 24点游戏 游戏规则&#xff1a; 54张扑克抽出大小王&#xff0c;剩余52张用来用于游戏&#xff1b;每一轮从52张牌中随机抽出4张&#xff1b;玩家运用加&#xff0c;减&#xff0…

尝试用智谱机器人+知识库,制作pytorch测试用例生成器

尝试用智谱机器人知识库,制作pytorch测试用例生成器 1 保存pytorch算子文档到txt2 创建知识库3 创建聊天机器人4 测试效果5 分享 背景:是否能将API的接口文档和sample放到RAG知识库,让LLM编写API相关的程序呢 小结:当前的实验效果并不理想,可以生成代码,但几乎都存在BUG 1 保存…

动态分配函数参数用二级指针的作用

文章目录 前言一、案例 前言 在一些情况下&#xff0c;我们需要在函数内部动态地分配内存来存储结构体&#xff0c;并且需要在函数外部访问该结构体。在这种情况下&#xff0c;可以使用二级指针作为函数参数来实现动态内存分配&#xff0c;并且在函数外部使用指针访问结构体。…

汽车IVI中控开发入门及进阶(二十三):i.MX8

前言: IVI市场的复杂性急剧增加,而TimeToMarket在几代产品中从5年减少到2-3年。Tier1正在接近开放系统的模型(用户可以安装应用程序),从专有/关闭源代码到标准接口/开放源代码,从软件堆栈对系统体系结构/应用层/系统验证和鉴定的完全所有权,越来越依赖第三方中间件和平…

liunx文件系统与日志分析

文章目录 一、基本概念二、日志分析三、实验 一、基本概念 文件是存储在硬盘上的&#xff0c;硬盘上的最小存储单位是扇区每个扇区大小事512字节 inode&#xff1a;元信息&#xff08;文件的属性 权限 创建者 创建日期&#xff09; block&#xff1a;块 连续八个扇区组成一块…

【爱空间_登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

Java八股文:程序员的“面试经”还是技术壁垒?

Java八股文&#xff1a;程序员的“面试经”还是技术壁垒&#xff1f; “八股文”&#xff0c;在中国古代科举考试中&#xff0c;指的是一种程式化的文章写作格式&#xff0c;内容空洞&#xff0c;缺乏创新。而如今&#xff0c;这个词语被赋予了新的含义&#xff0c;用来形容技术…

YOLOv10介绍与推理--图片和视频演示(附源码)

导 读 本文主要对YOLOv10做简单介绍并给出推理图片和视频的步骤演示。 YOLOv10简介 YOLOv10是清华大学的研究人员在Ultralytics Python包的基础上&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了YOLO 以前版本在后处理和模型架构方面的不足。通过消除非最大抑…

前端 CSS 经典:3D Hover Effect 效果

前言&#xff1a;有趣的 3D Hover Effect 效果&#xff0c;通过 js 监听鼠标移动&#xff0c;动态赋值 rotateX&#xff0c;rotateY 的旋转度来实现。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta …

【工具】Docker安装Jenkins并部署Java项目

【工具】Docker安装Jenkins并部署Java项目 文章目录 【工具】Docker安装Jenkins并部署Java项目1. 前置条件2. 安装3. 创建项目3.1 配置Maven3.2 构建项目3.3 自动部署 1. 前置条件 准备一台云服务器或本地虚拟机&#xff0c;保证必须要java环境&#xff0c;一键安装jdk&#x…

利用依赖结构矩阵管理架构债务

本文讨论了如何利用依赖结构矩阵&#xff08;DSM&#xff0c;Dependency Structure Matrix&#xff09;管理和识别架构债务&#xff0c;并通过示例应用展示了这一过程。原文: Managing Architecture Debt with Dependency Structure Matrix Vlado Paunovic Unsplash 技术债务&a…

【linux】线程同步和生产消费者模型

线程同步 当我们多线程访问同一个临界资源时&#xff0c;会造成并发访问一个临界资源&#xff0c;使得临界资源数据不安全&#xff0c;我们引入了锁的概念&#xff0c;解决了临界资源访问不安全的情况&#xff0c;对于线程而言竞争锁的能力有强有弱&#xff0c;对于之前就抢到…

HoneyTrap蜜罐系统实践操作@FreeBSD

HoneyTrap介绍 HoneyTrap是一个可扩展的开源系统&#xff0c;用于运行、监控和管理蜜罐。 HoneyTrap蜜罐系统通过在网络中部署感应节点&#xff0c;实时感知周边网络环境&#xff0c;并将感应节点的日志进行实时存储和可视化分析&#xff0c;从而实现对网络环境中威胁情况的感…

玄机平台应急响应—Linux日志分析

1、前言 啥是日志呢&#xff0c;日志就是字面意思&#xff0c;用来记录你干了啥事情。日志大体可以分为网站日志和系统日志&#xff0c;网站日志呢就是记录哪个用户在哪里什么时候干了啥事&#xff0c;以及其它的与网站相关的事情。系统日志呢&#xff0c;就是记录你的电脑系统…

ESP32开发板定义硬串口

ESP32 的默认串口 UART序号Rx PINTx PIN是否可用UART0GPIO3GPIO1是UART1GPIO9GPIO10是&#xff0c; 但与SPI flash相关联需要重新定义UART2GPIO16GPIO17是 下面我们定义2、4GPIO引脚为串口1&#xff1a; #include <HardwareSerial.h> HardwareSerial S1(1); 初始化 …

打家劫舍I 打家劫舍II (leetcode)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 打家劫舍Ihttps://leetcode.cn/problems/Gu0c2T/打家劫舍IIhttps://leetcode.cn/problems/PzWKhm/ 状态转移方程就是这样的&#xff1a; i位置选择偷f[i]&#xff1a;f[i] g[i-1] nums[i];i位置选择不偷g[i]&#xff1a;g…