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>

运行效果:

相关推荐
幼儿园技术家7 小时前
实现 GEO 监控:从多引擎探测到优化闭环
前端·后端
甲维斯7 小时前
GLM5.2+ZCode复刻坦克大战,自测50万帧!
前端·ai编程·游戏开发
Csvn8 小时前
useRef 的 5 个冷门但救命的高级用法
前端
小小小小宇8 小时前
Harness Engineering 与 AI 联动
前端
mqcode8 小时前
你项目里的 axios,封对了吗?从裸用到生产级的四步进化
vue.js·axios
鱼人8 小时前
HTML5 页面性能优化大全
前端
ping某8 小时前
专栏-null 和 undefined 到底是什么?
前端·javascript·后端
用户900463370408 小时前
5MB vs 4KB vs 无限大:浏览器存储谁更强?
前端
小小小小宇9 小时前
Harness Engineering 全解析与应用
前端
牧艺9 小时前
cos-design v3.0:从 15 个 Demo 到 49 个组件的视觉特效库
前端·视觉设计