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;
}
<el-select
v-model=”formInline.cardStatus”
placeholder=”未选择”
clearable
style=”width: 196px;”
>
查询
<el-table
const
v-loading=”loading”
:data=”tableData”
stripe
style=”width: 100%”
@selection-change=”handleSelectionChange”
>
可用
已过期
<el-button
type=”primary”
style=”color: #4770ff”
link
>续费
<el-button
type=”primary”
style=”color: #4770ff”
link
>查看
<el-button
type=”primary”
style=”color: #4770ff”
link
>编辑</el-button
>
<el-button
type=”primary”
style=”color: #4770ff”
lin
>删除</el-button
>
<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”
/>
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;
}
