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>

运行效果:

相关推荐
刘一说32 分钟前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h1 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_395448911 小时前
main.c_cursor_0202
前端·网络·算法
摘星编程1 小时前
用React Native开发OpenHarmony应用:Calendar日期范围选择
javascript·react native·react.js
东东5162 小时前
基于vue的电商购物网站vue +ssm
java·前端·javascript·vue.js·毕业设计·毕设
MediaTea2 小时前
<span class=“js_title_inner“>Python:实例对象</span>
开发语言·前端·javascript·python·ecmascript
雨季6662 小时前
Flutter 三端应用实战:OpenHarmony “微光笔记”——在灵感消逝前,为思想点一盏灯
开发语言·javascript·flutter·ui·dart
编码者卢布2 小时前
【Azure Stream Analytic】用 JavaScript UDF 解决 JSON 字段被转成 Record 的关键点
javascript·json·azure
梦梦代码精2 小时前
开源、免费、可商用:BuildingAI一站式体验报告
开发语言·前端·数据结构·人工智能·后端·开源·知识图谱
松树戈3 小时前
滥用AI生图引起的JavaScript heap out of memory排查记录
vue.js·ai编程