Pager 分页器

简洁模式

上一页 30 / 100 下一页

<template>
  <a-pager
    :totalPage="100"
    :currPage="currPage"
    :hideIfOnePage="false"
    @onChange="onPageChange"
  />
</template>
<script>
  export default {
    data() {
      return {
        currPage: 30
      };
    },
    methods: {
      onPageChange(item) {
        this.currPage = item;
        console.log("onPageChange", item);
      }
    }
  };
</script>

显示代码

正常模式

页数较少时的效果

上一页 1 ... 7 下一页

大于 7 页时的效果

上一页 1 ... 28 29 30 31 32 ... 100 下一页

<template>
  <a-pager
    :totalPage="100"
    :currPage="currPage"
    :hideIfOnePage="false"
    mode="simple"
    @onChange="onPageChange"
  />
</template>
<script>
  export default {
    data() {
      return {
        currPage: 30
      };
    },
    methods: {
      onPageChange(item) {
        this.currPage = item;
        console.log("onPageChange", item);
      }
    }
  };
</script>

显示代码

当只有一页时隐藏分页

当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。

当只有一页时隐藏分页：

on off

<template>
  <div>
    <div style="margin-bottom: 8px;">
      当只有一页时隐藏分页：
      <a-switch v-model="hideIfOnePage" active-text="on" inactive-text="off"/>
    </div>
    <a-pager
      :totalPage="1"
      :currPage="currPage"
      :hideIfOnePage="hideIfOnePage"
      @onChange="onPageChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      currPage: 1,
      hideIfOnePage: true,
    };
  },
  methods: {
    onPageChange(item) {
      this.currPage = item;
      console.log("onPageChange", item);
    }
  }
};
</script>

显示代码

API

属性	说明	类型	默认值
totalPage	总页数	Number	-
currPage	当前页数	Number	-
hideIfOnePage	只有一页是否自动隐藏	Boolean	true
mode	页码模式，有 sample normal	String	simple normal

事件

事件名称	说明	回调参数
onChange	页码发生变化时调用	Function(currPage:Number)