Data-Pagination 分页

r囧r小猫 2022-04-23 04:40 301阅读 0赞

![20190123201842997.png][]

<div class="block">
      <span class="demonstration">页数较少时的效果</span>
      <el-pagination
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
    <div class="block">
      <span class="demonstration">大于 7 页时的效果</span>
      <el-pagination
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>

![2019012320221978.png][]

<el-pagination
      :page-size="20"
      :pager-count="11"
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>

![20190123202426819.png][]

<el-pagination
      small
      layout="prev, pager, next"
      :total="50">
    </el-pagination>

![20190123202808802.png][]

<div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    <script>
      export default {
        methods: {
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          }
        },
        data() {
          return {
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
          };
        }
      }
    </script>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>small</td> 
   <td>是否使用小型分页样式</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>是否为分页按钮添加背景色</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>page-size</td> 
   <td>每页显示条目个数，支持 .sync 修饰符</td> 
   <td>number</td> 
   <td>—</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>total</td> 
   <td>总条目数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>pager-count</td> 
   <td>页码按钮的数量，当总页数超过该值时会折叠</td> 
   <td>number</td> 
   <td>大于等于 5 且小于等于 21 的奇数</td> 
   <td>7</td> 
  </tr> 
  <tr> 
   <td>current-page</td> 
   <td>当前页数，支持 .sync 修饰符</td> 
   <td>number</td> 
   <td>—</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>layout</td> 
   <td>组件布局，子组件名用逗号分隔</td> 
   <td>String</td> 
   <td><code>sizes</code>,&nbsp;<code>prev</code>,&nbsp;<code>pager</code>,&nbsp;<code>next</code>,&nbsp;<code>jumper</code>,&nbsp;<code>-&gt;</code>,&nbsp;<code>total</code>,&nbsp;<code>slot</code></td> 
   <td>'prev, pager, next, jumper, -&gt;, total'</td> 
  </tr> 
  <tr> 
   <td>page-sizes</td> 
   <td>每页显示个数选择器的选项设置（设置选择每页显示数量）</td> 
   <td>number[]</td> 
   <td>—</td> 
   <td>[10, 20, 30, 40, 50, 100]</td> 
  </tr> 
 </tbody> 
</table>

### Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size-change</td> 
   <td>pageSize 改变时会触发</td> 
   <td>每页条数</td> 
  </tr> 
  <tr> 
   <td>current-change</td> 
   <td>currentPage 改变时会触发</td> 
   <td>当前页</td> 
  </tr> 
 </tbody> 
</table>

[20190123201842997.png]: /images/20220323/1fa863e5fee14ed5802ec38226de277f.png
[2019012320221978.png]: /images/20220323/574f0ae8fcb64ee491aa57e62ac980f8.png
[20190123202426819.png]: /images/20220323/29f59ff8fbdb4075918568895faded24.png
[20190123202808802.png]: /images/20220323/0a765ec1617b4ff19353f4ab7571c83b.png