• 分页功能


    <template>
        <div>
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="8"
              layout="prev, pager, next"
              :total="len"
              :pager-count="5"
              :hide-on-single-page="true"
              v-if="pag"
            ></el-pagination>
    </div>
    </template>
     
    data(){
      return{
     articleInfoList: [], //每页显示的数据
          articleList: [], //所有的数据
          len: 0, //默认总的数据长度
          recruitmentInformation: {
            workExperience: "",
            education: "",
            monthlyWageStatus: "",
            workAddress: "",
          },
    }
     }
     
    list() {
          list({
            pageNo: 1,
            pageSize: 8,
            workExperience: this.recruitmentInformation.workExperience,
            education: this.recruitmentInformation.education,
            monthlyWageStatus: this.recruitmentInformation.monthlyWageStatus,
            workAddress: this.recruitmentInformation.workAddress,
          })
            .then((res) => {
              if (res.success) {
                if (res.body.list.length == 0) {
                  this.arelist = false;
                } else {
                  this.arelist = true;
                  this.articleList = res.body.list;
                  this.len = res.body.list.length;
                  this.handleInfo();
                }
              } else {
                this.arelist = false;
              }
            })
            .catch((err) => {});
        },
      
    handleInfo() {
          // 页数,如果有小数,只取整数部分
          let pageNum = Number(String(this.len / this.pagesize).split(".")[0]);
          // 定义一个空数组
          let newArr = [];
          // 遍历获取的数据,每次遍历都从数组的0位置开始截取,截取数量为每页显示的数量
          for (let i = 0; i < pageNum; i++) {
            newArr.push(this.articleList.splice(0, this.pagesize));
          }
          // 判断剩余的数据有没有小于每一页的数量,如果小于,就把剩余的数据放进newArr数组
          if (this.articleList.length < this.pagesize) {
            newArr.push(this.articleList.splice(0, this.articleList.length));
          }
          // 将新的数组赋给articleList[],用来渲染页面
          this.articleList = newArr;
          // 第一次进入页面显示this.articleList[]数组的第一个元素
          this.articleInfoList = this.articleList[0];
        },
     handleCurrentChange(currentPage) {
          this.articleInfoList = this.articleList[currentPage - 1];
        },
     
  • 相关阅读:
    Calendar日历类
    DateFormat类和SimpleDateFormat类
    Date时间类(java.util.Date)
    时间处理相关类
    不可变和可变字符序列使用陷阱
    String类
    搬圆桌问题
    重温经典之排序 java实现
    i++ 和 ++i
    Intellij Idea 使用技巧 updating
  • 原文地址:https://www.cnblogs.com/ray123/p/13613547.html
Copyright © 2020-2023  润新知