Vue 前端实现分页

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,currentPage*pagesize)" 
# 1-8. 这就是前端实现分页器的整个流程，下面附上完整代码

<!-- 表格区域 -->
      <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>

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 里面定义的 当前页
    }
  },
};