共计 1802 个字符,预计需要花费 5 分钟才能阅读完成。
问题形容
有这样一个业务场景:对于某个表格展现数据而言,这个表格的数据在 30~60 条之间,不会超过某个数量不会太多。
后端说:我一次性返回给你所有的数据,因为产品说必须要做分页,你就本人做分页吧,也不必传我分页参数了。行吧?
前端:行, 那我拿到所有的数据,依据分页参数,本人做一个截取展现呗
效果图
效果图就是失常的分页成果
代码附上
演示的话,间接复制粘贴即可。正文中简述了,代码思路
<template>
<div class="box">
<el-table height="240" :data="showTableData" border style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="home" label="他乡"></el-table-column>
</el-table>
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-size="pageSize"
:page-sizes="[2, 4, 6, 10]"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {data() {
return {
pageIndex: 1, // 第几页
pageSize: 4, // 每页几条数据
total: 0, // 总条目数
allTableData: [], // 所有的数据
showTableData: [], // 以后展现的数据};
},
mounted() {setTimeout(() => {
// 1. 模仿发申请获取所有的数据
let apiAllTableData = [
{
name: "孙悟空",
age: 500,
home: "花果山水帘洞",
},
{
name: "猪八戒",
age: 88,
home: "高老庄",
},
{
name: "沙和尚",
age: 1000,
home: "通天河",
},
{
name: "唐僧",
age: 9999,
home: "东土大唐",
},
{
name: "白龙马",
age: 12,
home: "东海",
},
{
name: "观音菩萨",
age: 18,
home: "南海",
},
{
name: "玉皇大帝",
age: 123456789,
home: "凌霄宝殿",
},
{
name: "如来佛祖",
age: 9999999.999,
home: "迦毗罗卫国",
},
];
// 2. 存一份所有的数据
this.allTableData = apiAllTableData;
// 3. 获取总条目数
this.total = this.allTableData.length;
// 4. 依据以后是第几页、每页展现几条,去截取须要展现的数据
this.getShowTableData();}, 1000);
},
methods: {getShowTableData() {
// 5. 获取截取开始索引
let begin = (this.pageIndex - 1) * this.pageSize;
// 6. 获取截取完结索引
let end = this.pageIndex * this.pageSize;
// 7. 通过索引去截取,从而展现
this.showTableData = this.allTableData.slice(begin, end);
},
// 8. 页数扭转,从新截取
handleCurrentChange(val) {
this.pageIndex = val;
this.getShowTableData();},
// 9. 条目数扭转,也从新截取
handleSizeChange(val) {
this.pageIndex = 1;
this.pageSize = val;
this.getShowTableData();},
},
};
</script>
其实对于某些数据量比拟少的表格展现业务场景,齐全能够不分页,或者由前端做截取分页。
正文完
发表至: element-ui
2022-04-29