分页组件 pagination

<el-config-provider :locale="locale">  
<!-- 分页行-->  
<div class="pagination">  
<el-pagination  
background  
layout="total,sizes,prev, pager, next,jumper"  
:total=total  //总共的数据量
:page-sizes="[4,6,8]"  //每页显示的数据量的列表
:page-size=pageSize    // 每页具体显示的数据量
:current-page = page  //当前页面是第几页
@size-change="sizeChange"  //每页具体显示的数据量发生改变时的事件
@current-change="currentChange"  // 页面号发生改变时的事件
/>  
</div>  
</el-config-provider>

相关js代码

// 分页  
let page = ref(1)  
let pageSize = ref(8)  
let total = ref(100)

// 分页查询  
function currentChange(page){  
console.log(`当前页面是第 ${page} 页`)


}  
function sizeChange(pageSize){  
console.log(`当前页面展示 ${pageSize} 条数据`)  

}  

css样式

/*分页行*/  
.pagination{  
width: 1250px;  
  
padding: 20px;  
border-radius: 10px;  
box-shadow: 2px 2px 10px gainsboro;  
  
}  
.el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .el-pager li.is-active {  
background-color: #ffb3a7;  
color: #151414;  
}  
.el-pagination {  
/*total大小*/  
--el-pagination-font-size: 20px;  
--el-pagination-bg-color: var(--el-fill-color-blank);  
--el-pagination-text-color: var(--el-text-color-primary);  
--el-pagination-border-radius: 2px;  
--el-pagination-button-color: var(--el-text-color-primary);  
--el-pagination-button-width: 44px;  
--el-pagination-button-height: 42px;  
--el-pagination-button-disabled-color: var(--el-text-color-placeholder);  
--el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);  
--el-pagination-button-bg-color: var(--el-fill-color);  
--el-pagination-hover-color: var(--el-color-primary);  
--el-pagination-font-size-small: 12px;  
--el-pagination-button-width-small: 24px;  
--el-pagination-button-height-small: 24px;  
--el-pagination-item-gap: 12px;  
white-space: nowrap;  
color: var(--el-pagination-text-color);  
font-size: var(--el-pagination-font-size);  
font-weight: 400;  
display: flex;  
align-items: center;  
}

效果：