vue 快速自定义分页el-pagination

vue 快速自定义分页el-pagination

• template

<div style="text-align: center"><el-paginationbackground:current-page="pageObj.currentPage":page-size="pageObj.page":page-sizes="pageObj.pageSize"layout="total,prev, pager, next, sizes":total="pageObj.total"prev-text="上一页"next-text="下一页"@current-change="currentChange"@size-change="sizeChange"></el-pagination></div>

• data

pageObj: {currentPage: 1,pageSizes: [10, 20, 30, 40],size: 10,total: 1000,
},

• method

handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}

• css

::v-deep .el-pagination .btn-prev {background-color: #1f3c77;color: #fff;padding: 0 10px;
}
::v-deep .el-pagination .btn-next {background-color: #1f3c77;color: #fff;padding: 0 10px;
}
::v-deep .el-pagination .el-pager li:not(.disabled).active {background-color: #457ae6;
}
::v-deep .el-pagination .el-pagination__total {color: #fff;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {color: #fff;
}
::v-deep .el-pagination .el-pager li.number {background-color: #1f3c77;color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quicknext {background-color: #1f3c77;color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quickprev {background-color: #1f3c77;color: #fff;
}