当遇到后端不想分页然后数据量不大的情况:
<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="tableData" border style="width: 100%">
<el-table-column type="index" label="序号" width="60" header-align="center" align="center"> </el-table-column>
<el-table-column prop="name" label="名称" min-width="130"> </el-table-column>
<el-table-column prop="state" label="状态" min-width="120"> </el-table-column>
</el-table>
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.page"
:page-sizes="[1, 3, 5]"
:page-size="listQuery.pageNum"
layout="->,total, sizes, prev, pager, next, jumper"
:total="totalNum"> </el-pagination>
</div>
<script>
export default {
data() {
return {
list: [], //后端接口给的列表数据(未分页,全部返回)
listQuery:{
page:1,
pageNum:10
}
}
},
created() {
//请求后端数据
this.getList();
},
computed: {
// 使用前端实现分页的计算数据
tableData() {
// 分页的起始下标
const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
// 分页的末尾下标
const endIndex = startIndex + this.listQuery.pageNum;
// 返回切割后的数据
return this.list.slice(startIndex, endIndex);
},
// 总条数
totalNum() {
return this.list.length;
},
// 总分页数
total() {
return Math.ceil(this.list.length / this.listQuery.pageNum);
}
},
methods:{
//数据
getList() {
//调用后端接口
listApi().then((res) => {
this.list = res.data;
});
},
// 每页列表数
handleSizeChange(val) {
this.listQuery.pageNum = val;
},
// 当前分页数(第几页)
handleCurrentChange(val) {
this.listQuery.page = val;
},
}
}
</script>
如果数据量大是不建议这样的,首先要请求大数据然后在分页影响性能,这时候就需要去打一顿后端让他做分页了,性能好还方便