vue element ui 分页器的slot 以及 样式

张这个样子子

直接上代码html

 <div class="block">
                    <span class="demonstration">完整功能</span>
                    <el-pagination
                        @size-change="handleSizeChange"                      
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="1"
                        :page-size="10"
                        layout="total, prev, pager, next,sizes, jumper,slot"
                        :total="100">
                        <el-button >确定</el-button>  
                    </el-pagination>
                     
                </div>

css部分

.block{
        display: flex;
        color:#444;
        margin: 20px;
    }
    .demonstration{
        line-height: 32px;
        color:#666;
        margin-right: 60px;
    }
    .pager-box >>> button,
    .pager-box >>> .el-pager li{
        background-color: transparent !important;
        /* color: #B4C2DC !important; */
        border: 1px solid #E2E2E2;
        border-left: none;
    }
    .pager-box >>> .el-pagination .el-pager li:not(.disabled).active {
        background-color: #2682FF !important;
        border: 1px solid #2682FF ;
        color:#FFF;
    }
    .pager-box >>>.el-pagination .btn-prev{
        border-left: 1px solid #E2E2E2;
        padding:0 12px;
    }
    .pager-box >>>.el-pagination .btn-next{
        padding:0 12px;
    }
    .pager-box >>> .el-button--default{
        border: 1px solid #E2E2E2;
    }