Vue利用slice()方法实现分页操作

Vue利用slice()方法实现分页操作
https://blog.csdn.net/pleaseprintf/article/details/129187584

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 系列文章目录
• 一、1. 思路 ： 使用 slice()方法进行分页？
• 二、使用步骤
• • 1.表格区域
  • 2.JS模块代码
• 总结

---

一、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()方法实现分页操作