element plus 升级2.5+后下拉框隐藏选中✓

最新推荐文章于 2024-09-14 10:52:06 发布

liytingtt

最新推荐文章于 2024-09-14 10:52:06 发布

阅读量330

点赞数 2

文章标签： vue.js javascript ecmascript elementui

本文链接：https://blog.csdn.net/li_970408/article/details/136852090

版权

本文介绍了如何在ElementUI的el-select组件上添加`popper-class`属性，以实现自定义下拉菜单的样式，包括鼠标悬停效果、选中状态的颜色和图标等。

摘要由CSDN通过智能技术生成

在el-select上加入popper-class属性

<el-select
      popper-class="selectStyle"
    >

在<style>里添加样式，注意不能加scope

//鼠标移动上去的选中色
.selectStyle {
  .el-select-dropdown__item {
    padding: 0px 22px 0 22px;
    height: 38px;
    display: flex;
    align-items: center;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: $color-primary-hover !important;
  }
  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: $color-checkbox-text !important;
  }
  //选中之后的颜色
  .el-select-dropdown__item.is-selected {
    background: $color-primary-hover !important;
  }
  //选中后的图标
  .el-select-dropdown__item.is-selected::after {
    display: none;
  }
}