Pagination 分页

优质

小牛编辑

130浏览

2023-12-01

Pagination 组件主要是基于 Element 的 el-pagination进行了二次封装，并拓展了自动滚动的功能。

使用方式

<template>
  <pagination
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="getList" />
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  methods: {
    getList() {
      // 获取数据
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值
total	总条目数	Number	/
page	当前页数支持 .sync 修饰符	Number	1
limit	每页显示条目个数，支持 .sync 修饰符	Number	20
page-sizes	每页显示个数选择器的选项设置	Number []	10, 20, 30, 50]
hidden	是否隐藏	Boolean	false
auto-scroll	分页之后是否自动滚动到顶部	Boolean	true

其它 Element 的 el-pagination支持的属性，它也都支持。详情见文档

Events

事件名称	说明	回调参数
pagination	当 limit 或者 page 发生改变时会触发	{page,limit}

Pagination 分页

使用方式

Attributes

Events

源码 && Demo