大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

分页、查询、重置、修改、删除

vue中的分页使用频繁，在此记录一下。因为分页一般和增删查改等一起使用，所以写了一套。若是没有使用到其他功能，可以直接删除，只使用分页功能。

   pagination: { 
   
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10", "20", "30"], // 每页中显示的数据
        showTotal: (total) => `共有${ 
     total}条数据`, //分页中显示总的数据
        showSizeChanger: true, // 显示页面条数改变
        showQuickJumper: true, // 显示快速跳转
      },
  queryParam: { 
   
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },

// ---------- 分页函数 -------------
    handleTableChange(pagination) { 
   
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;

      this.Search();
    }, 
// 1. 获取列表函数,该函数的作用是获取页面上显示的表格
 // 获取列表设置默认参数:分页为 1 的参数
    getList(queryPath = "?pageNo=1") { 
   
      this.dataSource = []; // 重置 table 的 dataSource 数据
      BZGLHttp.getFangfa(queryPath).then((res) => { 
   
        // console.log("res列表:::", res);
        // 设置分页
        const pagination = { 
    ...this.pagination };
        pagination.total = res.result.total;
        pagination.pageSize = res.result.size;
        this.pagination = pagination;
        // 渲染数据,把接收的数据渲染到table中
        
        for (let i = 0; i < res.result.records.length; i++) { 
   
          let data = { 
   
            key: (res.result.current - 1) * res.result.size + i + 1,
            day: res.result.records[i].day,
            id: res.result.records[i].id,
            remark: res.result.records[i].remark,
            storageQuantity: res.result.records[i].storageQuantity,
            transferOutQuantity: res.result.records[i].transferOutQuantity,
            lossQuantity: res.result.records[i].lossQuantity,
            lossRate: res.result.records[i].lossRate,
            source: res.result.records[i].source,
            source_dictText: res.result.records[i].source_dictText,
            grade: res.result.records[i].grade,
            grade_dictText: res.result.records[i].grade_dictText,
            operation: res.result.records[i].operation,
            operation_dictText: res.result.records[i].operation_dictText,
            otherTrainerId: res.result.records[i].otherTrainerId,
            otherTrainerId_dictText:
              res.result.records[i].otherTrainerId_dictText,
          };
          this.dataSource.push(data);
        }
      });
    },
        
 // 2. 获取查询条件 函数,该函数会返回当前的查询条件， 搜索栏查询条件 + 分页的页码
    getQueryPath() { 
   
      let queryPath =
        "?pageNo=" +
        this.queryParam.page +
        "&day=" +
        this.startTime +
        "&day=" +
        this.endTime +
        "&operation=" +
        this.form.operation;
      return queryPath; // 返回的查询条件
    },
 // 3. 重置当前页码及页码参数
    resetPagination() { 
   
      this.pagination = { 
   
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${ 
     total}条数据`, //分页中显示总的数据
      };
      //查询参数
      this.queryParam = { 
   
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      };
    },
  // 4、查询按钮触发函数——单独写，目的是在页码不为1时，点击查询，页码自动归1
    getsearch1() { 
   
      this.resetPagination(); //重置页码和参数
      //重置按钮触发函数
      // this.resetForm();
      // 获取目前选择好的查询条件
      let queryPath = this.getQueryPath();
      this.getList(queryPath);
      // this.resetPagination(); // 查询完后 需要重置页码和参数
    },
 // 5. 供分页调用的查询函数
    Search() { 
   
      // 获取目前选择好的查询条件
      let queryPath = this.getQueryPath();
      // console.log("当前的查询路径为:::",queryPath);
      this.getList(queryPath);
      //this.resetPagination(); // 查询完后 需要重置页码和参数
    },
 // 6. 重置按钮触发函数
    resetForm() { 
   
      // 重置查询表单,动态刷新列表
      this.form = { 
   
        day: null, //日期
        operation: "", //操作单选按钮
      };
      this.resetPagination(); //需要重置页码和参数
      // 重新调用获取列表函数，默认参数获取列表
      this.getList();
    }, 
  // 7. 修改提交
    handleOk() { 
   
      // console.log("要更新的数据::::::", this.updateForm);
      BZGLHttp.updateJianGenPaiShiInfo(this.updateForm).then((res) => { 
   
        console.log(res);
        if (res.code == 200) { 
   
          this.$message.success("修改成功");
        }
      });
      // 获取当前的查询路径重新进行查询，刷新列表
      let queryPath = this.getQueryPath();
      this.getList(queryPath);
      this.updatevisible = false;
    },
  // 8. 删除按钮 
    workdelete(Id) { 
   
      // console.log("要删除的该记录的id:::",Id);
      BZGLHttp.deleteJianGenPaiShiInfo("?id=" + Id).then((res) => { 
   
        if (res.code == 200) { 
   
          this.$message.success("删除成功");
          this.dataSource = [];
          let queryPath = this.getQueryPath();
          this.getList(queryPath);
        }
      });
    },