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>

运行效果:

相关推荐
Lear4 小时前
UniApp PDF文件下载与预览功能完整实现指南
前端
Heo4 小时前
关于XSS和CSRF,面试官更喜欢这样的回答!
前端·javascript·面试
7***A4434 小时前
Vue自然语言处理应用
前端·vue.js·自然语言处理
徐小夕5 小时前
耗时一周,我把可视化+零代码+AI融入到了CRM系统,使用体验超酷!
javascript·vue.js·github
高阳言编程5 小时前
vue2 + node + express + MySQL 5.7 的购物系统
前端
5***a9755 小时前
React Native性能优化技巧
javascript·react native·react.js
y***54885 小时前
React依赖
前端·react.js·前端框架
2***B4495 小时前
React测试
前端·react.js·前端框架
A3608_(韦煜粮)5 小时前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
5***o5005 小时前
React自动化测试
前端·react.js·前端框架