🔨 weView

Pagination 分页

介绍

TIP

功能

提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。

属性

属性描述默认值
v-model当前页--
limit每页数量--
total总条数--
showCount显示总数false
showPage显示每页false
showLimit显示每页数量false
showRefresh显示刷新按钮false
showSkip显示跳转false
pages显示切页按钮数量10
limits切换每页数量的选择项[10,20,30,40,50]
theme主题色blue

事件

事件描述参数
jump切换回调{ current: 当前页面 }
limit每页数量变化变化后的值
change分页事件{ current: 当前页码, limit: 每页数量 }

插槽

插槽描述默认值
prev上一页上一页
next下一页下一页

使用

基础使用

[ 1, 2, 3, 4, 5 ]
上一页12345下一页
基础使用
<template>
  <Pagination
    v-model="currentPage"
    :limit="limit"
    :total="total"
    :show-page="true"
  />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit = ref(20)
    const total = ref(100)
    const currentPage = ref(2)

    return {
      limit,
      total,
      currentPage,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
</style>

简洁模式

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
上一页下一页
简洁模式
<template>
  <Pagination :limit="limit1" v-model="current1" :total="total1"></Pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit1 = ref(10)
    const total1 = ref(100)
    const current1 = ref(1)

    return {
      limit1,
      total1,
      current1,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
</style>

设置主题

[ 1, 2, 3, 4, 5 ]
上一页12345下一页
设置主题
<template>
  <Pagination
    :limit="limit2"
    :total="total2"
    :show-page="true"
    theme="orange"
  ></Pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit2 = ref(20)
    const total2 = ref(100)

    return {
      limit2,
      total2,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
</style>

分页容量

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
共 125 条 25 页上一页12345678910下一页
分页容量
<template>
  <Pagination
    :limit="limit3"
    :total="total3"
    showCount
    showPage
    :limits="limits3"
  ></Pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit3 = ref(5)
    const total3 = ref(125)
    const limits3 = ref([5, 10, 50, 100, 200])

    return {
      limit3,
      total3,
      limits3,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
</style>

回调事件

[ 1, 2, 3, 4, 5 ]
上一页12345下一页
<template>
  <Pagination
    :limit="limit4"
    :total="total4"
    @change="change4"
    :show-page="true"
  ></Pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit4 = ref(20)
    const total4 = ref(100)
    const change4 = ({ current, limit }) => {
      alert('current:' + current + ' limit:' + limit)
    }

    return {
      limit4,
      total4,
      change4,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
</style>

完整分页

[ 1, 2, 3, 4, 5, 6, 7 ]
共 99 条 10 页上一页1234567下一页 到第 页 
<template>
  <button class="btn" @click="changeCurrent5">
    update model {{ current5 }}
  </button>
  <button class="btn" @click="changeLimit5">update limit {{ limit5 }}</button>
  <Pagination
    v-model="current5"
    v-model:limit="limit5"
    :pages="pages5"
    :total="total5"
    :show-count="true"
    :show-page="true"
    :show-limit="true"
    :show-refresh="true"
    :showSkip="true"
    @change="change5"
  ></Pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const limit5 = ref(10)
    const total5 = ref(99)
    const pages5 = ref(7)
    const current5 = ref(1)
    const changeCurrent5 = () => {
      current5.value = 2
    }
    const changeLimit5 = () => {
      limit5.value = 20
    }
    const change5 = ({ current, limit }) => {
      console.log('current:' + current + ' limit:' + limit)
    }
    return {
      limit5,
      total5,
      pages5,
      current5,
      changeCurrent5,
      changeLimit5,
      change5,
    }
  },
}
</script>

<style lang="scss" scoped>
.pager-em {
  box-sizing: content-box;
}
.btn {
  margin-right: 1em;
  padding: 0.5em 1em;
  border: 0;
  border-radius: 0.2em;
  background: orangered;
  color: white;
  cursor: pointer;
}
</style>