.el-pagination__sizes select改变不了element UI 分页器的下拉选择样式
时间: 2024-05-08 21:22:34 浏览: 96
如果您想自定义element UI分页器下拉选择样式,可以使用以下步骤:
1. 在您的项目中创建一个自定义的样式文件,例如:custom-pagination.css。
2. 在该文件中添加以下样式代码来覆盖element UI分页器下拉选择框的默认样式:
```
.el-pagination__sizes select {
/* 添加您想要的选择框样式 */
}
```
3. 在您的项目中引入自定义样式文件,在需要使用element UI分页器的页面中添加以下代码:
```
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper"
></el-pagination>
</div>
</template>
<script>
import 'custom-pagination.css'
export default {
data() {
return {
pageSize: 10
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
}
}
}
</script>
```
注意:在引入自定义样式文件时,请确保文件路径正确,并且在element UI样式文件之后引入。在上述示例中,我们使用import语句引入自定义样式文件,并且在export default之前导入。
阅读全文