68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
# Pagination 分页
|
||
|
||
当数据量过多时，使用分页分解数据。
|
||
|
||
## 基本用法
|
||
|
||
通过 `v-model` 来绑定当前页码，`total`设置总条数，`page-size`设置一页展示条数，默认为10条，总页数通过`total`和`page-size`自动计算。
|
||
|
||
```html
|
||
<wd-pagination v-model="value" @change="handleChange" />
|
||
```
|
||
|
||
```typescript
|
||
const value = ref<number>(1)
|
||
function handleChange({ value }) {
|
||
console.log(value)
|
||
}
|
||
```
|
||
|
||
## Icon图标
|
||
|
||
设置 `show-icon` 属性，将分页导航展示为Icon图标。
|
||
|
||
```html
|
||
<wd-pagination v-model="value" @change="handleChange" show-icon ></wd-pagination>
|
||
```
|
||
|
||
## 文字提示
|
||
|
||
设置 `show-message` 属性，展示文字提示。
|
||
|
||
```html
|
||
<wd-pagination
|
||
v-model="value"
|
||
:total="total"
|
||
:page-size="page"
|
||
@change="handleChange"
|
||
show-icon
|
||
show-message
|
||
/>
|
||
```
|
||
|
||
## Attributes
|
||
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
|-----|------|-----|-------|-------|--------|
|
||
| v-model | 绑定值 | number | - | - | - |
|
||
| prev-text | 上一页按钮文字 | string | - | 上一页 | - |
|
||
| next-text | 下一页按钮文字 | string | - | 下一页 | - |
|
||
| total-page | 总页数，如果有total，则优先使用total计算页数 | number | - | `根据页数计算` | - |
|
||
| page-size | 分页大小 | number | - | 10 | - |
|
||
| total | 总数据个数 | number | - | - | - |
|
||
| show-icon | 是否展示分页Icon | boolean | - | false | - |
|
||
| show-message | 是否展示文字提示 | boolean | - | false | - |
|
||
| hide-if-one-page | 总页数只有一页时是否隐藏 | boolean | - | true | - |
|
||
|
||
## Events
|
||
|
||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||
|---------|-----|------|--------|
|
||
| change | 值修改事件 | `{ value }`,value为当前值 |
|
||
|
||
## 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
|-----|------|--------|
|
||
| custom-class | 根节点样式 | - |
|