如何修改element ui 里的el-pagination分页下拉框的样式

通过给组件添加自定义样式的属性popper-class，注意在style标签不需要添加scoped，不然无效，代码示例如下：

<template>
  <div class="">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
      popper-class='select_bottom'
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      currentPage: 10,
    };
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>

<style lang="scss">
.select_bottom{
  .el-select-dropdown__item.selected{
    color:red;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background:red;
    color:#fff;
  }
}
</style>

效果图：

element ui 官网 el-pagination 组件下面 API 中 有个 popper-class  你加个类名就能控制了

优先级不够加个！important试试

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632