vue3前端调用后端接口实现分页，搜索

//3个搜索获取index.php/tags-301.html" >数据+分页

export function parkEnterPage(

address: string,

methods: string,

carNumber :string,

personName:string,

cardStatus:string,

page: number,

pageSize: number

) {

const res = instance({

url: `${address}?carNumber=${carNumber}&personName=${personName}&cardStatus=${cardStatus}&page=${page}&pageSize=${pageSize}`,

method: methods,

});

return res;

}

查询

可用

已过期

续费

查看

编辑

删除

import { ref, onMounted, reactive } from "vue";

import { h } from "vue";

import type { EmptyObject,carNu } from "@/types/monthCard";

import { useRouter} from "vue-router"

import {

parkEnterPrise,

parkEnterPrisePage,

deleteApi,

AddApi,

EchoApiId,

searchApi,

parkEnterPage,

} from "@/constants/counterhoc";

 

// const inputs = ref("");

const loading = ref(true);

const form = reactive({

area: "",

floors: "",

name: "",

propertyFeePrice: "",

});

 

// 获取数据

const tableData = ref();

 

//搜索的表单

const formInline = reactive({

carNumber: '',

personName: '',

cardStatus: '',

})

 

// const carNumber=ref('')

//查询 获取数据

let ceartch = async () => {

let res = await parkEnterPage(

"/parking/card/list",

"GET",

formInline.carNumber,

formInline.personName,

formInline.cardStatus,

currentPage4.value,

pageSize4.value

);

if (res.data.code == 10000) {

loading.value = false;

tableData.value = res.data.data.rows;

// console.log(tableData.value);

}

total.value = res.data.data.total;

};

const currentPage4 = ref(1);

const pageSize4 = ref(5);

const small = ref(false);

const background = ref(false);

const disabled = ref(false);

const total = ref(0);

// //查询

 

const handleSizeChange = (val: number) => {

pageSize4.value = val;

ceartch();

};

const handleCurrentChange = (val: number) => {

currentPage4.value = val;

ceartch();

};

 

//获取数据

onMounted(() => {

ceartch();

});

body {

margin: 0;

}

.example-showcasess {

width: 100%;

height: 100vh;

background-color: #fff;

}

.example-showcase .el-loading-mask {

z-index: 9;

}

.example-back {

background-color: #4770ff;

}

.addnalc {

width: 100%;

/* padding: 10px; */

}

.tables {

padding: 10px;

}

.demo-pagination-block {

width: 100%;

display: flex;

justify-content: flex-end;

}