用vue和element组件库写分页
时间: 2023-11-20 19:07:25 浏览: 36
好的,下面是一个简单的示例代码:
template:
```
<template>
<div>
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</template>
```
script:
```
<script>
export default {
data() {
return {
total: 1000, // 数据总数
pageSize: 10, // 每页显示的数据条数
currentPage: 1, // 当前页码
};
},
methods: {
handleSizeChange(val) {
// 每页显示数据条数改变时触发
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
// 当前页码改变时触发
console.log(`当前页码: ${val}`);
},
},
};
</script>
```
在这个示例中,我们使用了 `el-pagination` 组件来实现分页功能。其中,`total` 属性表示数据总数,`pageSize` 属性表示每页显示的数据条数,`currentPage` 属性表示当前页码。同时,我们在 `@size-change` 和 `@current-change` 事件中分别处理每页显示数据条数和当前页码的变化。
除此之外,我们还设置了 `:page-sizes="[10, 20, 30, 40]"`,表示每页显示数据条数的可选项;`layout="total, sizes, prev, pager, next, jumper"`,表示分页组件布局。你可以根据自己的需要进行调整。
希望能对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)