通过给组件添加自定义样式的属性popper-class
注意在style标签不需要添加scoped,不然无效,代码示例如下:
<template>
<div>
<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 lang="ts" setup>
import { ref } from 'vue';
const currentPage = ref<number>(10)
const handleSizeChange = () => {
}
const 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>
效果图