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

//3个搜索获取数据+分页

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;

}

<template>

<div class="example-showcasess">

<div style="padding: 10px">

<!-- 搜索 -->

<el-form :inline="true" :model="formInline" class="demo-form-inline">

<el-form-item label="车牌号码">

<el-input v-model="formInline.carNumber" placeholder="请输入车牌号码" clearable />

</el-form-item>

<el-form-item label="车主姓名">

<el-input v-model="formInline.personName" placeholder="请输入车主姓名" clearable />

</el-form-item>

<el-form-item label="状态">

<el-select

v-model="formInline.cardStatus"

placeholder="未选择"

clearable

style="width: 196px;"

> <el-option label="全部" value="2" />

<el-option label="可用" value="0" />

<el-option label="已过期" value="1" />

</el-select>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="ceartch">查询</el-button>

</el-form-item>

</el-form>

</div>

<div class="addnalc">

</div>

<div class="tables">

<el-table

const

v-loading="loading"

:data="tableData"

stripe

style="width: 100%"

@selection-change="handleSelectionChange"

>

<el-table-column type="selection" />

<el-table-column prop="id" label="序号" />

<el-table-column prop="personName" label="车主名称" />

<el-table-column prop="phoneNumber" label="联系方式" />

<el-table-column prop="carNumber" label="车牌号码" />

<el-table-column prop="carBrand" label="车辆品牌" />

<el-table-column prop="totalEffectiveDate" label="剩余有效天数"></el-table-column>

<el-table-column prop="cardStatus" label="状态">

<template #default="scope">

<div>

<el-button v-if="scope.row.cardStatus == '0'" link plain size="small">

可用

</el-button>

<el-button v-else v-if="scope.row.cardStatus == '1'" plain size="small" link> 已过期 </el-button>

</div>

</template>

</el-table-column>

<el-table-column prop="address" label="操作" width="300px">

<template #default="scope">

<el-button

type="primary"

style="color: #4770ff"

link

>续费</el-button>

<el-button

type="primary"

style="color: #4770ff"

link

>查看</el-button>

<el-button

type="primary"

style="color: #4770ff"

link

>编辑</el-button

>

<!-- @click="Echo(scope.row.id)" -->

<el-button

type="primary"

style="color: #4770ff"

lin

>删除</el-button

>

</template>

</el-table-column>

</el-table>

</div>

<div class="demo-pagination-block">

<el-pagination

v-model:current-page="currentPage4"

v-model:page-size="pageSize4"

:page-sizes="[5, 10, 15, 20]"

:small="small"

:disabled="disabled"

:background="background"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

/>

</div>

</div>

</template>

<script setup lang="ts">

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<EmptyObject>();

 

//搜索的表单

const formInline = reactive<carNu>({

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();

});

</script>

<style scoped>

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;

}

</style>