iView UI参考手册

组件布局

Page 分页

概述

当数据量较多时，使用分页可以快速进行数据切换。

代码示例

<template>
    <Page :total="100" />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :total="100" show-sizer />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :total="100" show-elevator />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :total="100" show-total />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :total="40" size="small" />
    <Page :total="40" size="small" show-elevator show-sizer />
    <Page :total="40" size="small" show-total />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :current="2" :total="50" simple />
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Page :total="100" prev-text="Previous" next-text="Next" />
</template>
<script>
    export default {
        
    }
</script>

API

Page props

属性	说明	类型	默认值
current	当前页码，支持 .sync 修饰符	Number	1
total	数据总数	Number	0
page-size	每页条数	Number	10
page-size-opts	每页条数切换的配置	Array	[10, 20, 30, 40]
placement	条数切换弹窗的展开方向，可选值为 bottom 和 top	String	bottom
size	可选值为small（迷你版）或不填（默认）	String	-
simple	简洁版	Boolean	false
show-total	显示总数	Boolean	false
show-elevator	显示电梯，可以快速切换到某一页	Boolean	false
show-sizer	显示分页，用来改变page-size	Boolean	false
class-name	自定义 class 名称	String	-
styles	自定义 style 样式	Object	-
transfer	是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果	Boolean	false
prev-text	替代图标显示的上一页文字	String	-
next-text	替代图标显示的下一页文字	String	-

Page events

事件名	说明	返回值
on-change	页码改变的回调，返回改变后的页码	页码
on-page-size-change	切换每页条数时的回调，返回切换后的每页条数	page-size

Page slot

名称	说明
无	自定义显示总数的内容

组件布局相关

1.Grid 栅格
2.Card 卡片
3.Collapse 折叠面板
4.Split 面板分割
5.Divider 分割线
6.Cell 单元格
7.Menu 导航菜单
8.Tabs 标签页
9.Dropdown 下拉菜单
10.Breadcrumb 面包屑
11.Badge 徽标数
12.Anchor 锚点
13.Steps 步骤条
14.LoadingBar 加载进度条

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局