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

如图所示:

el-select长度较短的时候,选择框右侧下拉箭头会遮挡选中的数据

选中数据被遮挡

解决办法:

组件如下:

javascript 复制代码
<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>

添加样式:

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

效果如下:

相关推荐
lichenyang45316 小时前
鸿蒙聊天 Demo 练习 05:新增登录功能,实现登录态保存与页面访问控制
前端
还有多久拿退休金16 小时前
我用 Three.js 造了个 3D 漫步世界,角色走路像喝醉了——以及我是怎么修好的
前端·vue.js
SZLSDH16 小时前
场景适配论 | 数字孪生IOC建设中渲染技术与智能体能力的协同逻辑
前端·数据库·ai·数字孪生·数据可视化·智能体
LJA6484416 小时前
为什么 AI 时代更需要配置化组件库
vue.js
_按键伤人_16 小时前
二、从零搭建本地 RAG 知识库
前端·llm·ai编程
_按键伤人_16 小时前
一、理解 RAG:从概念到实践
前端·llm·ai编程
lichenyang45316 小时前
鸿蒙聊天 Demo 练习 04:聊天历史本地缓存,实现消息记录持久化
前端
名字都不重要何况昵称16 小时前
canvas 元素拾取
前端·canvas
从文处安16 小时前
「前端何去何从」React Router:让单页应用有多页的体验
前端·react.js
Lkstar16 小时前
Vue Router 进阶:导航守卫、动态路由与懒加载,源码级理解
前端