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

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);
}
});
},