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>

运行效果:

相关推荐
kyriewen10 分钟前
我拿 4 个真实前端任务试了 GLM-5.3 Flash:代码一遍跑通,账单 4 分钱
前端·程序员·ai编程
IT_陈寒10 分钟前
Vue的响应式更新有时候真的不听话
前端·人工智能·后端
风骏时光牛马27 分钟前
AI编程常见问题梳理与要点解析
前端
前端snow30 分钟前
ai agent -- LCEL 汇总
前端
SLD_Allen1 小时前
Go语言runtime全景
开发语言·javascript·golang
计算机魔术师1 小时前
NVIDIA 季度营收指引达 1080 亿美元,首次突破单季千亿大关
前端
数据狐(Datafox)1 小时前
京东商品列表API技术解析与落地应用(含标准 JSON 示例)
java·大数据·前端·人工智能·python·数据分析·json
风萧何1 小时前
架构艺术,是权衡的艺术。
前端·javascript·架构
偷偷挖矿的牛马矿工1 小时前
execa NodeJs新一代child_process的强力替代品
javascript
YIAN1 小时前
ESLint 新版 Flat Config 实战:团队代码风格统一,从这一份配置开始
前端·团队管理