Vue2.0 + Element-ui2实现分页
时间: 2024-05-11 20:19:15 浏览: 219
Vue2.0分页组件
5星 · 资源好评率100%
要使用Vue2.0和Element-ui2实现分页,你可以按照以下步骤进行操作:
1.安装Element-ui
```
npm i element-ui -S
```
2.在main.js中引入Element-ui
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
3.在需要使用分页的组件中引入el-pagination组件,并设置相关参数
```
<template>
<div>
<el-pagination
:total="total" //总条数
:page-size="pageSize" //每页显示条数
:current-page.sync="currentPage" //当前页数
layout="total, sizes, prev, pager, next, jumper" //分页布局
:page-sizes="[10, 20, 30, 50]" //每页显示条数选项
@size-change="handleSizeChange" //页数改变时触发
@current-change="handleCurrentChange" //每页显示条数改变时触发
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
total: 100, //总条数
pageSize: 10, //每页显示条数
currentPage: 1 //当前页数
}
},
methods: {
//页数改变时触发
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
//当前页数改变时触发
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>
```
以上就是Vue2.0 + Element-ui2实现分页的基本步骤。你可以根据实际需求进行参数的调整和样式的修改。
阅读全文