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>

运行效果:

相关推荐
用户69371750013849 小时前
不卷AI速度,我卷自己的从容——北京程序员手记
android·前端·人工智能
xiaotao1319 小时前
03. 原子化 CSS 思想
前端·css·tailwind
敲代码的约德尔人9 小时前
JavaScript 设计模式完全指南
javascript·设计模式
angerdream9 小时前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
javascript·vue.js
小小亮0110 小时前
qiankun的面试题
前端
爱宇阳10 小时前
Nuxt4 + Tailwind CSS v4 自定义响应式断点完整指南
前端·css·nuxt4
Jutick10 小时前
揭秘低延迟:WebSocket 实时行情如何拯救你的量化策略?——Python 生产级实现
前端
~欲买桂花同载酒~10 小时前
项目优化-vite打包优化
前端·javascript·vue.js
林夕sama10 小时前
多线程基础(五)
java·开发语言·前端