vue3中,element-plus中el-select隐藏下拉箭头

vue3中,element-plus中el-select隐藏下拉箭头

需求:el-select需要隐藏下拉箭头

            <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"

            <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、设置样式

<style scoped lang="scss">
:deep .no-arrow-select .el-select__caret {
  display: none;
}
</style>

运行效果: