- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## BePagination 分页

序号 | 姓名 | 年龄 | 创建时间
1 | Mr.22 | 39 | 2023-08-08 18:44:42
2 | Mr.19 | 35 | 2023-08-08 18:44:42
3 | Mr.22 | 52 | 2023-08-08 18:44:42
4 | Mr.69 | 10 | 2023-08-08 18:44:42
5 | Mr.64 | 34 | 2023-08-08 18:44:42
6 | Mr.93 | 21 | 2023-08-08 18:44:42
7 | Mr.40 | 40 | 2023-08-08 18:44:42
8 | Mr.20 | 17 | 2023-08-08 18:44:42
9 | Mr.56 | 32 | 2023-08-08 18:44:42
10 | Mr.4 | 43 | 2023-08-08 18:44:42

暂无数据
使用options配置分页的显示样式，card:是否是卡片 showNumber:显示数目 低于5条时不展示... icon: 大小和颜色

    import { BePagination } from '@brewer/beerui'
    const query = { limit: 10, name: "", page: 1 }
    const options = {
    	card: true,
    	showNumber: 6,
    	icon: {
    		width: 12,
    		height: 12,
    		color: '#1492FF'
    	}
    }
    let list = []
    let total = 11 // 总条数
    const feedBackList = async () => {
    	total = 11
    	const name = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
    	const defaultItem = {
    		name: name[0],
    		phone: Math.random().toString().substr(0, 11),
    		content: '1'
    	}
    let temp = []
    for (let i = 0; i < 10; i++) {
    	temp.push(Object.assign(defaultItem, { content: name[i % 8], name: i + 'name' }))
    }
    list = temp
    }
    feedBackList()
    // 切换页面
    function changePage(item) {
    	query.page = Number(item.detail)
    	feedBackList()
    }

    <BePagination
    	currentPage=1
    	pageSize={query.limit}
    	{total}
    	on:changePage={changePage}
    	{options}
    />

    <BePagination
    	currentPage=1
    	pageSize={query.limit}
    	total=200
    	async
    	layouts="prev, pager, next"
    	on:changePage={changePage}
    	{options}
    />

    <BePagination
    	currentPage=1
    	pageSize={query.limit}
    	total=300
    	async
    	layouts="prev, pager, next"
    	on:changePage={changePage}
    	options={options1}
    />

    <BePagination
    	currentPage=1
    	pageSize={query.limit}
    	total=50
    	async
    	layouts="prev, pager, next"
    	on:changePage={changePage}
    	options={options2}
    />

显示代码

## 附加功能

序号 | 姓名 | 年龄 | 创建时间
1 | Mr.84 | 22 | 2023-08-08 18:44:42
2 | Mr.93 | 51 | 2023-08-08 18:44:42
3 | Mr.43 | 35 | 2023-08-08 18:44:42
4 | Mr.59 | 28 | 2023-08-08 18:44:42
5 | Mr.78 | 59 | 2023-08-08 18:44:42
6 | Mr.37 | 47 | 2023-08-08 18:44:42
7 | Mr.97 | 18 | 2023-08-08 18:44:42
8 | Mr.75 | 18 | 2023-08-08 18:44:42
9 | Mr.82 | 53 | 2023-08-08 18:44:42
10 | Mr.81 | 29 | 2023-08-08 18:44:42

显示 10条 当前在 第1 / 5页 共 41 条

- 10条/页
- 15条/页
- 20条/页

跳至
页

1. layouts prev, pager, next, sizes, jumper, info, all 展示不同的区块
2. changePage 监听页码改变
3. pageSizeChange 监听页数改变

    const pageSizeChange = ({ detail }) => {
    	query.limit = detail
    	feedBackList()
    }

    <BePagination
    	currentPage=1
        pageSize={query.limit}
        {total}
        async
        layouts="prev, pager, next, sizes, jumper, info, all"
        on:changePage={changePage}
        on:pageSizeChange={pageSizeChange}
        {options}
    />

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
total | 总条数 | number | - | 0
type | 类别 | string | mini/normal | normal
currentPage | 当前页 | number | - | 1
pageSize | 显示条数 | number | - | 10
layouts | 功能按钮 | string | prev, pager, next, sizes, jumper, info, all | prev, pager, next
async | 异步接口需要开启 | boolean | true/false | false
pageSizes | 可选页码 | number[] | - | [10, 15, 20]
options | 其它设置 | optionsType | - | 见下方类型

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
changePage | 页码数改变 | 当前页数
pageSizeChange | 条数改变 | 当前条数

    type optionsType = {
    	card: boolean // 是否是块状
    	showNumber: number // 分页按钮展示数量
    	scroll: boolean // 是否需要自动滚动到头部
    	icon: any // 上一页 下一页的大小和颜色
    }
    const defaultOptions: optionsType = {
      card: false,
      showNumber: 8,
      scroll: true,
      icon: {}
    }