Pagination 分页

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

何时使用

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

基本

基础分页。

<template>
  <g-pagination v-model:current="current" :total="50" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current = ref(1)
    
    return {
      current
    }
  }
}
</script>

更多

更多分页。

<template>
  <div>
    <g-pagination
      v-model:current="current1"
      :total="500"
      show-size-changer
      show-quick-jumper
      show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
    <br />
    <g-pagination
      v-model:current="current2"
      :total="500"
      :show-total="total => `Total ${total} items`"
      :page-size="20"
      :show-size-changer="false"
    />
    <br />
    <g-pagination
      v-model:current="current3"
      :total="500"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      show-size-changer
      show-quick-jumper
      :show-less-items="true"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current1 = ref(1)
    const current2 = ref(1)
    const current3 = ref(1)
    
    return {
      current1,
      current2,
      current3
    }
  }
}
</script>

改变

改变每页显示条目数。

<template>
  <g-pagination
    v-model:current="current"
    v-model:page-size="pageSize"
    :total="500"
    show-size-changer
    @show-size-change="onShowSizeChange"
  />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current = ref(1)
    const pageSize = ref(10)
    
    const onShowSizeChange = (current, size) => {
      console.log(current, size)
    }
    
    return {
      current,
      pageSize,
      onShowSizeChange
    }
  }
}
</script>

跳转

快速跳转到某一页。

<template>
  <g-pagination
    v-model:current="current"
    :total="500"
    show-quick-jumper
    @change="onChange"
  />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current = ref(1)
    
    const onChange = (page) => {
      console.log(page)
    }
    
    return {
      current,
      onChange
    }
  }
}
</script>

迷你

迷你版本。

<template>
  <div>
    <g-pagination v-model:current="current1" :total="50" size="small" />
    <br />
    <g-pagination
      v-model:current="current2"
      :total="50"
      size="small"
      show-size-changer
      show-quick-jumper
    />
    <br />
    <g-pagination
      v-model:current="current3"
      :total="50"
      size="small"
      :show-total="total => `Total ${total} items`"
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current1 = ref(1)
    const current2 = ref(1)
    const current3 = ref(1)
    
    return {
      current1,
      current2,
      current3
    }
  }
}
</script>

简洁

简单的翻页。

<template>
  <g-pagination v-model:current="current" :total="500" simple />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current = ref(1)
    
    return {
      current
    }
  }
}
</script>

受控

受控制的页码。

<template>
  <div>
    <g-pagination
      v-model:current="current"
      :total="50"
      @change="onChange"
    />
    <br />
    Current: {{ current }}
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const current = ref(1)
    
    const onChange = (page) => {
      console.log(page)
      current.value = page
    }
    
    return {
      current,
      onChange
    }
  }
}
</script>

总数

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

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

上一步和下一步

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

<template>
  <div>
    <g-pagination :total="500" :item-render="itemRender" />
    <br />
    <g-pagination :total="500" :item-render="itemRender" size="small" />
  </div>
</template>

<script>
import { h } from 'vue'

export default {
  setup() {
    const itemRender = (current, type, originalElement) => {
      if (type === 'prev') {
        return h('a', 'Previous')
      }
      if (type === 'next') {
        return h('a', 'Next')
      }
      return originalElement
    }
    
    return {
      itemRender
    }
  }
}
</script>

API

参数	说明	类型	默认值	版本
current(v-model)	当前页数	number	-
defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-	1.5.0
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' | 'prev' | 'next', originalElement) => vNode | v-slot	-
pageSize(v-model)	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[]	['10', '20', '50', '100']
responsive	当 size 未指定时，根据屏幕宽度自动调整尺寸	boolean	-
showLessItems	是否显示较少页面内容	boolean	false	1.5.0
showQuickJumper	是否可以快速跳转至某页	boolean | object	false
showSizeChanger	是否展示 pageSize 切换器，当 total 大于 50 时默认为 true	boolean	-
showTitle	是否显示原生 tooltip 页码提示	boolean	true	1.5.0
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)	-
simple	当添加该属性时，显示为简单分页	boolean	-
size	当为「small」时，是小尺寸分页	string	""
total	数据总数	number	0

事件

事件名称	说明	回调参数
change	页码或 pageSize 改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)
showSizeChange	pageSize 变化的回调	Function(current, size)