Pagination 分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

• 当加载/渲染所有数据将花费很多时间时；
• 可切换页码浏览数据。

代码演示

• 
• 1
• 2
• 3
• 4
• 5
• 

基本

基础分页。

<template>
  <a-pagination v-model="current" :total="50" show-less-items />
</template>
<script>
export default {
  data() {
    return {
      current: 2,
    };
  },
};
</script>

• 
• 1

• •••

• 4

• 5
• 6
• 7
• 8

• •••

• 50

• 

更多

更多分页。

<template>
  <a-pagination :default-current="6" :total="500" />
</template>

改变

改变每页显示条目数。

<template>
  <div>
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
    <br />
    <a-pagination
      v-model="current"
      show-size-changer
      :page-size.sync="pageSize"
      :total="500"
      disabled
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageSize: 20,
      current: 4,
    };
  },
  watch: {
    pageSize(val) {
      console.log('pageSize', val);
    },
    current(val) {
      console.log('current', val);
    },
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    },
  },
};
</script>

• 
• 1
• 2
• 3
• 4
• 5
• 

• 10条/页

  

自定义下拉选项

自定义下拉选项，例如添加全部选项

<template>
  <a-pagination
    v-model="current"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
    :page-size="pageSize"
    @showSizeChange="onShowSizeChange"
  >
    <template slot="buildOptionText" slot-scope="props">
      <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      <span v-if="props.value === '50'">全部</span>
    </template>
  </a-pagination>
</template>
<script>
export default {
  data() {
    return {
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      pageSize: 10,
      total: 50,
    };
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
    },
  },
};
</script>

跳转

快速跳转到某一页。

<template>
  <div>
    <a-pagination show-quick-jumper :default-current="2" :total="500" @change="onChange" />
    <br />
    <a-pagination
      show-quick-jumper
      :default-current="2"
      :total="500"
      disabled
      show-less-items
      @change="onChange"
    />
  </div>
</template>
<script>
export default {
  methods: {
    onChange(pageNumber) {
      console.log('Page: ', pageNumber);
    },
  },
};
</script>

迷你

迷你版本。

<template>
  <div id="components-pagination-demo-mini">
    <a-pagination size="small" :total="50" />
    <a-pagination size="small" :total="50" show-size-changer show-quick-jumper />
    <a-pagination size="small" :total="50" :show-total="total => `Total ${total} items`" />
  </div>
</template>
<style scoped>
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
</style>

• 
• ／5
• 

简洁

简单的翻页。

<template>
  <a-pagination simple :default-current="2" :total="50" />
</template>

• 
• 1
• 2
• 3
• 4
• 5
• 

受控

受控制的页码。

<template>
  <a-pagination :current="current" :total="50" @change="onChange" />
</template>
<script>
export default {
  data() {
    return {
      current: 3,
    };
  },
  methods: {
    onChange(current) {
      this.current = current;
    },
  },
};
</script>

总数

通过设置 showTotal 展示总共有多少数据。

<template>
  <div>
    <a-pagination
      :total="85"
      :show-total="total => `Total ${total} items`"
      :page-size="20"
      :default-current="1"
    />
    <br />
    <a-pagination
      :total="85"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      :default-current="1"
    />
  </div>
</template>

• Previous
• 1
• 2
• 3
• 4
• 5

• •••

• 50

• Next

上一步和下一步

修改上一步和下一步为文字链接。

<template>
  <a-pagination :total="500" :item-render="itemRender" />
</template>
<script>
export default {
  methods: {
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a>Previous</a>;
      } else if (type === 'next') {
        return <a>Next</a>;
      }
      return originalElement;
    },
  },
};
</script>

API

<a-pagination @change="onChange" :total="50" />

事件