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

通过给组件添加自定义样式的属性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>

效果图