element中分页的使用
时间: 2023-09-24 14:03:27 浏览: 44
Element UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件,其中包括 Pagination 分页组件。
使用 Element 中的 Pagination 分页组件的步骤如下:
1. 在 Vue.js 项目中安装并引入 Element UI。
2. 在需要使用分页功能的组件中引入 Pagination 组件。
```
<template>
<div>
<el-pagination
background
:total="100"
:page-size="10"
layout="prev, pager, next"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { Pagination } from 'element-ui';
export default {
components: {
Pagination,
},
methods: {
handleCurrentChange(page) {
console.log(`当前页: ${page}`);
},
},
};
</script>
```
3. 在组件中使用 Pagination 组件,并设置相应的属性,如 `total` 表示总条数, `page-size` 表示每页显示的数据量,`layout` 表示分页组件的布局, `@current-change` 表示当前页码发生变化时,调用的方法。
通过 Element 中的 Pagination 组件,可以快速实现分页功能,并且可以根据实际需求,灵活设置分页组件的样式和功能。