解决el-select选择框右侧下拉箭头遮挡文字问题

news2025/6/7 21:00:26

如图所示:

el-select长度较短的时候,选择框右侧下拉箭头会遮挡选中的数据
在这里插入图片描述
选中数据被遮挡
在这里插入图片描述

解决办法:

组件如下:

<td class="fmtd" :colspan="col.ptproCupNum" v-for="col in row" :key="col.ptproHeatNum" >
      <el-select class="transparent-select" v-model="col.ptproFm" placeholder="请选择"  clearable >
           <el-option
             v-for="item in optionsFm"
             :key="item"
             :label="item"
             :value="item">
           </el-option>
       </el-select>
</td>

添加样式:

/*加大选择框右侧内边距*/
/deep/.fmtd .el-input__inner{
    padding-right: 10px;
  }
/*隐藏选择框右侧向下箭头,设置背景色透明*/
/deep/.fmtd .el-select .el-input__suffix  {
  background-color: transparent;
  display: none;
}

效果如下:

在这里插入图片描述

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

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

相关文章

20250603在荣品的PRO-RK3566开发板的Android13下的使用命令行来查看RK3566的温度【显示优化版本】

20250603在荣品的PRO-RK3566开发板的Android13下的使用命令行来查看RK3566的温度【显示优化版本】 2025/6/3 11:58 RK3566的cpu运行效率 top busybox top rk3566_t:/ # rk3566_t:/ # rk3566_t:/ # cd /sys/class/thermal/ rk3566_t:/sys/class/thermal # ls -l rk3566_t:/sys/c…

C语言字符数组初始化的5种方法(附带实例)

所谓初始化&#xff0c;就是在定义的同时进行赋值。 C语言中&#xff0c;初始化字符数组的方式多样&#xff0c;每种方式都有其特定的用途和优势。 1、使用字符串字面量初始化 最常见和简洁的初始化方式是使用字符串字面量。在这种方法中&#xff0c;我们直接将一个用双引号…

npm run dev 报错:Error: error:0308010C:digital envelope routines::unsupported

npm run dev时报错如下 原因&#xff1a;更换node版本导致 解决&#xff1a; 修改package.json文件&#xff0c;在相关构建命令之前加入 SET NODE_OPTIONS–openssl-legacy-provider 运行成功

基于LLaMA-Factory和Easy Dataset的Qwen3微调实战:从数据准备到LoRA微调推理评估的全流程指南

随着开源大模型如 LLaMA、Qwen 和 Baichuan 的广泛应用&#xff0c;其基于通用数据的训练方式在特定下游任务和垂直领域中的表现仍存在提升空间&#xff0c;因此衍生出针对具体场景的微调训练需求。这些训练涵盖预训练&#xff08;PT&#xff09;、指令微调&#xff08;SFT&…

idea中 maven 本地仓库有jar包,但还是找不到,解决打包失败和无法引用的问题

1、删除本地仓库中的文件 进入本地仓库对应jar包文件目录中删除_remote.repositories文件和结尾为.lastUpdated的文件 2、回到IDEA刷新Maven 3、查看之前引用不了的jar是否引入成功

(33)课54--??:3 张表的 join-on 连接举例,多表查询总结。

&#xff08;112&#xff09;3 张表的 join-on 连接举例 &#xff1a; &#xff08;113&#xff09; 多表查询总结 &#xff1a; &#xff08;114&#xff09;事务 &#xff1a; &#xff08;115&#xff09; &#xff08;116&#xff09; &#xff08;117&#xff09; …

SpringCloud学习笔记-3

声明&#xff1a;笔记来源于网络&#xff0c;如有侵权联系删除 1 openfeign 1&#xff09;openfeign远程调用声明式实现 1.启动类中添加注解 EnableFeignClients EnableFeignClients SpringBootApplication public class OrderMainApplication {public static void main(St…

BugKu Web渗透之eval

启动场景&#xff0c;打开网页&#xff0c;显示的是一段代码。 步骤一&#xff1a; 分析代码。 代码大概意思是&#xff1a; <?php//包含"flag.php"的文件include "flag.php"; //获取网页请求的hello数据$a $_REQUEST[hello]; //显示变量a的详…

DAY45 可视化

DAY 45 Tensorborad 之前的内容中&#xff0c;我们在神经网络训练中&#xff0c;为了帮助自己理解&#xff0c;借用了很多的组件&#xff0c;比如训练进度条、可视化的loss下降曲线、权重分布图&#xff0c;运行结束后还可以查看单张图的推理效果。 如果现在有一个交互工具可…

11.RV1126-ROCKX项目 API和人脸检测画框

一.ROCKX的API 1.ROCKX的作用 ROCKX的AI组件可以快速搭建 AI的应用&#xff0c;这些应用可以是车牌识别、人脸识别、目标识别&#xff0c;人体骨骼识别等等。主要用于各种检测识别。例如下图&#xff1a; 2.ROCKX人脸识别的API rockx_ret_t rockx_create(rockx_handle_t *han…

超构光学与 AR 的深度融合 | 攻克 VAC 与眼动范围难题

原文信息 原文标题&#xff1a;“Three-dimensional varifocal meta-device for augmented reality display” 第一作者&#xff1a;宋昱舟&#xff0c;袁家琪&#xff0c;陳欽杪&#xff0c;刘小源 &#xff0c;周寅&#xff0c;程家洛&#xff0c;肖淑敏*&#xff0c;陈沐…

[ Qt ] | 与系统相关的操作(三):QFile介绍和使用

目录 之前的操作文件的方式 Qt中的文件操作简介 QFile 打开 读 写 关闭 一个例子来说明 QFileInfo 之前的操作文件的方式 C语言中&#xff0c;fopen 打开文件&#xff0c;fread fwrite 读写文件&#xff0c;fclose 关闭文件。 C中&#xff0c;fstream 打开文件&…

软件工程:如何做好软件产品

1、什么是产品 从项目到产品 产品&#xff1a;满足行业共性需求的标准产品。即要能够做到配置化的开发&#xff0c;用同一款产品最大限度地满足不同客户的需求&#xff0c;同时让产品具有可以快速响应客户需求变化的能力。 好的产品一定吸收了多个项目的共性&#xff0c;一定是…

蓝桥杯 省赛 2025python(B组)题目(分析)

目录 第一题 为什么答案是103而不是104&#xff1f; 第二题 为什么必须按长度排序&#xff1f; 第三题 易错点总结 第四题 逻辑问题&#xff1a; 可能超过时间复杂度的代码示例 1. 暴力枚举所有可能的子串 2. 递归回溯 第五题 1. 暴力枚举法 2. 优化枚举 3.数…

React - 组件通信

组件通信 概念&#xff1a;组件通信就是组件之间数据传递&#xff0c;根据组件嵌套关系不同&#xff0c;有不同的通信方法 父传子 —— 基础实现 实现步骤 父组件传递数据 - 在子组件标签上绑定属性子组件接收数据 - 子组件通过props参数接收数据 声明子组件并使用 //声明子…

飞牛使用Docker部署Tailscale 内网穿透教程

之前发过使用docker部署Tailscale的教程&#xff0c;不过是一年前的事情了&#xff0c;今天再重新发表一遍&#xff0c;这次使用compose部署更加方便&#xff0c;教程也会更加详细一点&#xff0c;希望对有需要的朋友有所帮助&#xff01; 对于大部分用户来说&#xff0c;白嫖 …

《数据挖掘》- 房价数据分析

这里写目录标题 采用的技术1. Python编程语言2. 网络爬虫库技术点对比与区别项目技术栈的协同工作流程 代码解析1. 导入头文件2. 读取原始数据3. 清洗数据4. 数据分割4.1 统计房屋信息的分段数量4.2 将房屋信息拆分为独立列4.3 处理面积字段4.4 删除原始房屋信息列 5. 可视化分…

C++之动态数组vector

Vector 一、什么是 std::vector&#xff1f;二、std::vector 的基本特性&#xff08;一&#xff09;动态扩展&#xff08;二&#xff09;随机访问&#xff08;三&#xff09;内存管理 三、std::vector 的基本操作&#xff08;一&#xff09;定义和初始化&#xff08;二&#xf…

【Zephyr 系列 11】使用 NVS 实现 BLE 参数持久化:掉电不丢配置,开机自动加载

🧠关键词:Zephyr、NVS、非易失存储、掉电保持、Flash、AT命令保存、配置管理 📌目标读者:希望在 BLE 模块中实现掉电不丢配置、支持产测参数注入与自动加载功能的开发者 📊文章长度:约 5200 字 🔍 为什么要使用 NVS? 在实际产品中,我们经常面临以下场景: 用户或…

【Android】Android Studio项目代码异常错乱问题处理(2020.3版本)

问题 项目打开之后&#xff0c;发现项目文件直接乱码&#xff0c; 这样子的 这本来是个Java文件&#xff0c;结果一打开变成了这种情况&#xff0c;跟见鬼一样&#xff0c;而且还不是这一个文件这样&#xff0c;基本上一个项目里面一大半都是这样的问题。 处理方法 此时遇到…