后端不写逻辑:加这个:data="accountList.slice((page-1)*pageSize,page*pageSize)"
accountList:是我的数据
<el-table :data="accountList.slice((page-1)*pageSize,page*pageSize)" style="width: 100%" border stripe class="eltable">
<el-table-column type="index" label="ID"></el-table-column>
<el-table-column prop="name" label="名称" width="120px">
</el-table-column>
<el-table-column prop="phone" label="电话" width="120px">
</el-table-column>
<el-table-column prop="avatar" label="微信头像" width="80px">
<template v-slot="scope">
<img :src="scope.row.avatar" alt="" class="avaurl">
</template>
</el-table-column>
<el-table-column prop="nickname" label="微信名称" width="210px"></el-table-column>
<el-table-column prop="number" label="身份证号" width="170px"></el-table-column>
<el-table-column prop="picture1" label="正面照">
<template v-slot="scope">
<img :src="scope.row.avatar" alt="" class="avaurl">
</template>
</el-table-column>
<el-table-column prop="picture2" label="反面照">
<template v-slot="scope">
<!-- {{scope.row}} -->
<img :src="scope.row.avatar" alt="" class="avaurl">
</template>
</el-table-column>
<el-table-column prop="create_time" label="注册时间"></el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination class="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
@size-change=“handleSizeChange"的作用是每页获取有多少条数据是配合:page-size使用
@current-change="handleCurrentChange"的作用是获取现在是第几页的意思,是配合:current-page="currentPage"一起使用
在js里的data数据里加上所需数据
data() {
return {
accountList: [],
total: 0,
page: 1,
pageSize: 10,
list: [],
};
},
然后在js代码中写入逻辑
created() {
this.loadData();
},
methods: {
loadData() {
apis.getAllAccounts({
page: this.page,
pageSize: this.pageSize
}).then((res) => {
console.log(res.data);
if (res.data.code === 0) {
this.accountList = res.data.data.list
this.total = res.data.data.total
}
});
},
handleSizeChange(val) {
this.pageSize = val;
this.loadData();
},
handleCurrentChange(val) {
this.page = val;
this.loadData();
}
记得传参数
},