当前位置: 首页 > backend >正文

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

如图所示:

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-optionv-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.xdnf.cn/news/12148.html

相关文章:

  • 自建 Derp 中继节点
  • golang 如何定义一种能够与自身类型值进行比较的Interface
  • 【论文解读】MemGPT: 迈向为操作系统的LLM
  • 13.4 AI颠覆语言学习:预录制视频+GPT-4评估如何实现60%成本降低与40%留存飙升
  • 阿里云域名怎么绑定
  • Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
  • React---day9
  • Python爬虫与Java爬虫深度对比:从原理到实战案例解析
  • 用函数实现模块化程序设计(适合考研、专升本)
  • 自定义注解facade 实现切面 进行日志记录和参数校验
  • Xcode 16.4 + iOS 18 系统运行时崩溃:___cxa_current_primary_exception 符号丢失的原因与解决方案
  • 用 n8n 提取静态网页内容:从 HTTP Request 到 HTML 节点全解析
  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice在线编辑word文件保存数据同时保存文件
  • Ubuntu20.04设置为开机后直接自动进入纯命令行界面
  • mysql复合查询mysql子查询
  • 深度学习姿态估计实战:基于ONNX Runtime的YOLOv8 Pose部署全解析
  • IDEA:配置 Git 需要完成 Git 路径设置、账号认证以及仓库关联三个主要步骤
  • 目标检测实战:让AI“看见“并定位物体(superior哥AI系列第11期)
  • [Zynq] Zynq Linux 环境下 AXI UART Lite 使用方法详解(代码示例)
  • ArcGIS Pro 3.4 二次开发 - 宗地
  • HarmonyOS:如何在启动框架中初始化HMRouter
  • 【前端】vue3性能优化方案
  • 【Linux】Linux基础指令1
  • RPA+AI:自动化办公机器人开发指南
  • 基于值函数的强化学习算法之Double Q-Learning详解
  • 129、QT搭建FFmpeg环境
  • vue3+ts实现百度地图鼠标绘制多边形
  • 【websocket】安装与使用
  • 在word中点击zotero Add/Edit Citation没有反应的解决办法
  • 前端js获取当前经纬度(H5/pc/mac/window都可用)