【el-pagination的使用及修改分页组件的整体大小修改默认样式的宽度详细教程】

今天遇到个bug，使用element-puls中的分页的时候，长度会超出盒子，今天教大家如何修改el-pagination的宽度，以及修改分页组件的整体大小

直接修改   style="width: 100%; margin-top: 10px"不生效

控制台修改el-pagination宽度也不生效

解决办法：

添加这两个属性

 small

 pager-count="1"

  <el-paginationbackground:total="materials.length":page-size="pageSize":current-page.sync="currentPage"layout="total, sizes, prev, pager, next, jumper":page-sizes="[10, 20, 30, 40]"@size-change="handleSizeChange"@current-change="handlePageChange"class="pagination-style"style="width: 100%; margin-top: 10px"smallpager-count="1"></el-pagination></el-col>

改完发现依然超出

使用深度修改：

  ::v-deep .el-select {width: 76px;}::v-deep .el-input {width: 46px;}

最终效果：