Vue利用slice()方法实现分页操作
https://blog.csdn.net/pleaseprintf/article/details/129187584
系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、1. 思路 : 使用 slice()方法进行分页?
1-1. 拿到要分页的表格数据过后,获取到表格数据的长度,将表格数据的长度设置 为分页器里面的总条目数
this.total = this.pdDataList.length;
1-2. 让后在 分页器里面的 total 属性上进行绑定
1-3. 在 Vue 中的 data 里面设置 当前页和 当前条数: 即(currentPage 和 pagesize)
1-4. element-ui 中分页器为我们提供了两个事件:
size-change : 每页条数 改变时触发
current-change :当前页 改变时触发
1-5. 在 size-change 事件里面 将 data 中定义的 pagesize 的值进行改变
handleSizeChange(pageSize){
// pageSize 是当前选中的条数
this.pagesize = pageSize;
},
1-6. 在 current-change 事件里面将 data 中定义的 currentPage 的值进行改变
// 当前页改变时触发
handleCurrentChange(pageNum){
// pageNum 是当前点击的页码
this.currentPage = pageNum;
}
1-7. 然后在 表格数据绑定的时候利用 数组的 slice() 方法进行分页
:data=“pdDataList.slice((currentPage-1)pagesize,currentPagepagesize)”
二、使用步骤
1.表格区域
代码如下(示例):
<el-table :data="pdDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border>
<el-table-column type="index" align="center" label="序号" width="60">
</el-table-column>
<el-table-column prop="PDNO" align="center" label="单号" width="180">
</el-table-column>
<el-table-column align="center" label="盘点状态" width="180">
<template slot-scope="scope">
<el-tag type="info" v-if="scope.row.PDFREQ === 'A'">待盘点</el-tag>
<el-tag type="warning" v-if="scope.row.PDFREQ === 'B'"
>盘点中</el-tag
>
<el-tag v-if="scope.row.PDFREQ === 'C'">已提交</el-tag>
<el-tag type="success" v-if="scope.row.PDFREQ === 'D'"
>已结束</el-tag
>
</template>
</el-table-column>
<el-table-column prop="WARENO" align="center" label="仓码" width="180">
</el-table-column>
<el-table-column prop="STORENO" align="center" label="储位">
</el-table-column>
<el-table-column prop="MATNO" align="center" label="料号">
</el-table-column>
<el-table-column prop="SHOULD_START" align="center" label="开始时间">
</el-table-column>
<el-table-column prop="SHOULD_FINISH" align="center" label="截止时间">
</el-table-column>
<el-table-column prop="REAL_QTY" align="center" label="实盘">
</el-table-column>
<el-table-column prop="SHOULD_QTY" align="center" label="应盘">
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
2.JS模块代码
代码如下(示例):
export default {
data() {
return {
// 盘点清单的查询条件
pdInfo: {
plantno: "MAC1FTH", //工廠DB(必須)
empno: "F3841014", //登錄工號(必須,不是賬號)
workDate: "2022-5-14", //任務日期(必須)
wareno: "", //倉碼
storeno: "", //儲位
matno: "", //料號(可模糊)
pdstate: "", //盤點單狀態
},
stateList: [], // 盘点状态
pdDataList: [], // 盘点清单数据
total:0, // 总条数
currentPage:1, // 当前页
pagesize:5, // 每页显示条目个数
};
},
mounted() {},
created() {
this.getTime();
this.getPdState();
console.log("获取state", this.$store.state);
},
// 计算属性
computed: {
empno() {
return this.$store.state.user.userid;
},
plantno() {
return this.$store.state.user.plantno;
},
},
methods: {
// 获取当前时间所在日期
async getTime() {
const res = await workTime();
this.pdInfo.workDate = res.data.data.date;
// 在日其查询完毕后,发送盘点清单的请求
this.getPdList();
},
// 获取盘点清单
async getPdList() {
console.log("盘点信息", this.pdInfo);
const res = await pdList(this.pdInfo);
console.log("获取盘点清单", res);
if (res.data.state !== 0)
return this.$message.error("获取数据失败,请重新在试");
this.pdDataList = res.data.data;
this.total = this.pdDataList.length;
return this.$message.success(res.data.desc);
},
// 获取盘点状态
async getPdState() {
const res = await pdState();
console.log("获取状态", res);
this.stateList = res.data.data;
},
// 每页条数改变时触发
handleSizeChange(pageSize){
console.log('条数',pageSize);
this.pagesize = pageSize; // 在 每次 每页条数触发的时候,将选择中的值 赋值给 data 里面定义的 页显示条目个数
},
// 当前页改变时触发
handleCurrentChange(pageNum){
console.log('当前页改变时触发',pageNum);
this.currentPage = pageNum; // 在每次当前页改变后的值 赋值给 data 里面定义的 当前页
}
},
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
总结
提示:这里对文章进行总结:
例如:以上就是Vue利用slice()方法实现分页操作
标签:Vue,分页,res,当前页,盘点,slice,data From: https://www.cnblogs.com/sunny3158/p/17221645.html