需求:el-pagination分页器给下拉框选中项设置字体颜色

65 阅读1分钟

需求:el-pagination分页器给下拉框选中项设置字体颜色

参考文档:zhuanlan.zhihu.com/p/654552093

image.png

单独在全局或者deep给el-select-dropdown__item.selected元素添加color属性是无法实现该效果的, 单纯进行样式穿透是没办法进行修改的。因为这个下拉选择的框不在body元素里; 如果在el-select选择器中,需要加一句::popper-append-to-body="false" ,但如果是在el-pagination中,单纯进行popper-append-to-body,然后样式穿透是无法实现的,则需要结合**popper-class="selectshanweiOpStyle", :popper-append-to-body="false" **两个 属性来实现。

需要新开一个style标签,然后根据层级写下来样式。一定不能有scoped。

<style>
.selectshanweiOpStyle{
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    color: #6658bb;
  }

  .el-select-dropdown__item.selected{
    color: #6658bb;
  }

}
</style>

这个popper-class为了避免全局污染,就起一些复杂的名字。 目前对el-pagnation的修改只能通过popper-class。