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

解决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.lqws.cn/news/154711.html

相关文章:

  • DASCTF
  • buuctf——web刷题第二页
  • MCP协议在LLM系统中的架构与实现原理研究
  • `sendto()` / `recvfrom()` - 发送/接收数据(UDP)
  • PX4 | 无人机关闭磁力计罗盘飞行(yaw estimate error报错解决方法)
  • react私有样式处理
  • React---day9
  • Educational Codeforces Round 179 (Rated for Div. 2)
  • centos查看开启关闭防火墙状态
  • Java高级 | 【实验五】Spring boot+mybatis操作数据库
  • 获取KIMI API以及API key
  • Jenkins实现自动化部署Springboot项目到Docker容器(Jenkinsfile)
  • IDM 免费安装使用方法,支持6.42版本,实时更新
  • 查看本机显卡信息
  • 华为云Flexus+DeepSeek征文 | 基于DeepSeek-V3构建企业知识库问答机器人实战
  • 不等式中的放缩法
  • Java中List的forEach用法详解
  • 总结vxe-grid的一些用法
  • Jenkins | Linux环境部署Jenkins与部署java项目
  • vscode 离线安装第三方库跳转库
  • 更新Java的环境变量后VScode/cursor里面还是之前的环境变量
  • Github Copilot新特性:Copilot Spaces-成为某个主题的专家
  • 【已解决】MACOS M4 芯片使用 Docker Desktop 工具安装 MICROSOFT SQL SERVER
  • openvino如何在c++中调用pytorch训练的模型
  • 阿里云ACP云计算备考笔记 (3)——云存储RDS
  • HttpServletRequest常用方法
  • 第六个微信小程序:教师工具集
  • 前端js获取当前经纬度(H5/pc/mac/window都可用)
  • JVM——如何打造一个类加载器?
  • Flask-Babel 使用示例