Vue Element-Ui 前端控制表格分页
<template>
<div >
<el-table :data="list.slice((page-1)*size,page*size)"> <!-- 表格中使用:data来决定数据 其中的slice决定分页显示记录数 -->
<el-table-column type="selection"></el-table-column> <!-- 此处按需添加表头 -->
</el-table>
<div style="margin: 20px 0px">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" <!-- 分页控制器 -->
:page-size="size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
export default {
data() {
return {
page: 1,
size: 10,
total: 0,
list: [],
}
},
mounted() {
getCollegeIdDepartment().then(res => {
that.list= res['data']
that.total = res['total']
}),
handleSizeChange(val) {
this.size = val
},
handleCurrentChange(val) {
this.page = val
},
}
}