element ui 分页组件自定义每页条数page-size

张闲生 / 2023-07-22 / 原文

参考代码：

<div style="display: flex;">
            <el-pagination
              :total="total"
              :pager-count="5"
              :page-size="searchForm.pageSize"
              :current-page="searchForm.pageIndex"
              :page-sizes="[16, 32, 48, 120]"
              background
              class="foot"
              layout="total,prev, pager, next"
              @size-change="pageSizeChange"
              @current-change="currentPageChange">
            </el-pagination>
            <el-select
              v-model="valuePageSize"
              filterable
              allow-create
              default-first-option
              style="float: left;width: 80px"
              @change="changePageSize">
              <el-option
                v-for="item in optionsPageSize"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="mini">
              </el-option>
            </el-select><span style="font-size: 13px;line-height: 28px">条/页</span>
          </div>

效果展示：

参考：https://blog.csdn.net/haibo1101/article/details/115860666?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-115860666-blog-129086291.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-115860666-blog-129086291.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=4