專案中需要用到的分頁按鈕樣式如圖:

HTML部分:

<el-pagination background
                layout="prev, pager, next, jumper"
                :total="500">
</el-pagination>

CSS部分:

::v-deep.el-pagination{ float: right; margin-top: 40px; button{ height: 56px; width: 56px; ">transparent !important; border: 2px solid #A7A889; border-radius: 4px; .el-icon{ font-size: 30px; font-weight: 400; color: #FFFE9F; } } .el-pagination__jump{ font-size: 30px; font-weight: 400; color: #FFFE9F; line-height: 45px; .el-input.el-pagination__editor{ width: 140px; } input{ overflow: hidden; width: 96px; overflow: auto; height: 56px; color: #FFFE9F; font-size: 30px; border: 2px solid #A7A889; border-radius: 4px; ">transparent !important; } } ul{ li{ margin-left: 30px !important; height: 56px; width: 56px; font-size: 30px; color: #FFFE9F !important; font-weight: 400; line-height: 56px; ">transparent !important; border: 2px solid #A7A889; border-radius: 4px; } li.el-icon{ margin-right: 30px; } li:last-child{ margin-right: 30px; display: none; } li.active{ color: #ffffff !important; background: linear-gradient(45deg, #DD2E9B 0%, #F47039 99%); } li.active+li{ border-left: 2px solid #A7A889; } } }

實現效果:

暫未實現:

1.控制按鈕個數,如效果圖顯示,只顯示1,2,3,4,5和6頁不顯示

2.前往的輸入框 input ,隨輸入長度自適應長度變化

3.前往...頁,文字替換為:跳至...頁