Vue请求el-table数据的公用方法(含查询条件与分页)

Vue请求el-table数据的公用方法(含查询条件与分页)

废话不多说，直接上代码！ 详见注释

/*
*获取列表数据的公用方法  其中参数flag，用于标识是否点击搜索按钮进行查询
*/
async query(flag){
	// 点击搜索按钮时，设置flag为可以为true的值   即可将页码复位为1
  	if (flag) {
     	this.page.pageNo = 1;
     }
     //定义请求参数的对象  并将分页参数赋值
     let param = {
         pageNo: this.page.pageNo,
         pageSize: this.page.pageSize
     };
     //遍历查询条件，若条件值不为空  则赋值给请求参数
     for (const key in this.formData) {
         if (this.formData[key] != "") {
             param[key] = this.formData[key];
         }
     }
     //发送请求
     let res = await getDataList(param);
     //判断返回值是否为字符串，是则提示错误信息  否则将返回值赋给列表
     if (typeof res != 'string') {
         this.listData = res?.data || [];
         this.page.total = res?.totalPage || 0;
     }else{
     	this.$notify({
     		type:"error",
     		message:res,
     		title:"错误"
     	})
     }
}

注：请求返回值形式具体看个人项目的请求响应拦截