当前位置 博文首页 > hibiscusxin的博客:vue-element的分页el-pagination
1、
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="formInline.page"
:page-sizes="num"
:page-size="formInline.size"
layout="sizes, prev, pager, next"
:total="total">
</el-pagination>
export default {
data() {
return {
formInline: {
page: 1,
size: 10
},
num: [10, 20, 30, 40, 50],
total: 0
}
},
methods: {
// 改变每页条数
handleSizeChange(val) {
this.formInline.size = val
this.getList()
},
// 改变当前页数
handleCurrentChange(val) {
this.formInline.page = val
this.getList()
},
// 获取列表信息
getList() {
this.loading = true
User.searchList(this.formInline).then(res => {
if (res.success) {
this.dataList = res.data
this.total = res.total
this.loading = false
}
}).catch(() => {
this.loading = false
})
}
}
}
2、
<el-pagination
v-show="total > 0"
:page-size="formInline.size"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
export default {
data() {
return {
formInline: {
page: 1,
size: 10
}
}
},
methods: {
// 改变当前页数
handleCurrentChange(val) {
this.formInline.page = val
this.getList()
}
}
}
cs