《elementui分类_element分页怎么用》

解决方案简述

Element UI的分页组件（Pagination）用于对大量数据进行分页展示，使页面更加简洁、易用。使用时需先引入组件，再根据需求配置参数。

一、基本使用

确保项目中已安装并正确引入Element UI。在需要使用分页的页面中，通过以下代码实现基本分页功能：
```html

export default {

}

``
这里total表示总条目数为100，page - size表示每页显示10条数据，layout`定义了分页组件的布局，包含上一页按钮（prev）、页码列表（pager）、下一页按钮（next）。

二、与表格结合使用

当分页与表格一起使用时，可以更好地展示和操作数据。
```html

export default {
data() {
return {
tableData: [
// 模拟表格数据
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区江路 1518 弄' },
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区江路 1517 弄' },
// 省略其他数据
],
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 50 // 总条数
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
// 这里可以根据新的每页条数重新获取数据
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
// 根据新页码获取对应的数据
}
}
}

``
在这个例子中，@size - change监听每页条数改变事件，@current - change`监听当前页改变事件，以便根据用户的操作动态更新表格显示的数据。

三、自定义分页样式

如果想要自定义分页的样式，可以通过CSS或者使用Element UI提供的background属性等来实现简单定制。
例如添加背景颜色：
html
<el-pagination
background
layout="prev, pager, next"
:total="100">
</el-pagination>

通过设置background属性为true，可以让分页按钮有背景颜色。若要更复杂地修改样式，则可以利用CSS选择器针对.el - pagination类及其子元素进行样式调整。