vue3中,element-plus中el-select隐藏下拉箭头

需求:el-select需要隐藏下拉箭头

html 复制代码
            <el-select v-model="apply.dataType" readonly>
              <el-option :key="1" label="样品检相同项目" :value="1" />
              <el-option :key="2" label="样品检不同项目" :value="2" />
            </el-select>

解决方法:

1、给组件添加自定义类名 class="no-arrow-select"

html 复制代码
            <el-select class="no-arrow-select" v-model="apply.dataType" readonly>
              <el-option :key="1" label="样品检相同项目" :value="1" />
              <el-option :key="2" label="样品检不同项目" :value="2" />
            </el-select>

2、设置样式

html 复制代码
<style scoped lang="scss">
:deep .no-arrow-select .el-select__caret {
  display: none;
}
</style>

运行效果:

相关推荐
熊的猫1 分钟前
校招生问我在vue中,什么时候该用 render 函数?
前端·javascript·vue.js
striver_#16 分钟前
京东前端社招面经
前端·面试
掘金安东尼17 分钟前
用 CSS random() 来掷骰子
前端·css·面试
前端小巷子18 分钟前
Vue 事件系统
前端·vue.js·面试
訾博ZiBo24 分钟前
VibeCoding 时代来临:如何打造让 AI 秒懂、秒改、秒验证的“AI 友好型”技术栈?
前端·后端
excel31 分钟前
彻底理解缓冲区:从概念、背压到可运行的 Fetch 流式示例
前端
小蜜蜂嗡嗡3 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说4 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh9 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh9 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试