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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS专题图制作—3D峡谷地形

6分钟教你在ArcGIS Pro中优雅完成炫酷的美国大峡谷3D地图 6分钟教你在ArcGIS Pro中优雅完成炫酷的美国大峡谷3D地图。 这一期的制图教程将带我们走入美国大峡谷&#xff0c;让我们一起绘制这张美妙的地图吧&#xff01;视频也上传到了B站&#xff0c;小伙伴可以去&#xff01; …

go自编自导自写一片协成池

近段时间&#xff0c;在用go的时候找了许久没有发现go协成池之类的东西&#xff0c;然后自己脑子一热&#xff0c;手撸的一个协成池&#xff0c;希望这个东西可以帮助到&#xff0c;也在go语言中苦苦寻求go协成池的伙伴&#xff0c;有什么想法可以留言到下面 func TestGoPoll(…

Django测试工具 Client

Django测试工具 Client Python3 manage.py shell 1.测试模型中的数据操作 from OverlayList.models import RequestInfo RequestInfo.objects.all() 2.测试URL视图&#xff0c;返回值 $Python3 manage.py shell from django.test.utils import setup_test_environment setu…

数据结构与算法解题-20240426

这里写目录标题 面试题 08.04. 幂集367. 有效的完全平方数192. 统计词频747. 至少是其他数字两倍的最大数718. 最长重复子数组 面试题 08.04. 幂集 中等 幂集。编写一种方法&#xff0c;返回某集合的所有子集。集合中不包含重复的元素。 说明&#xff1a;解集不能包含重复的子…

【网络原理】TCP协议的连接管理机制(三次握手和四次挥手)

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】网络编程中的基本概念及Java实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 【网络…

Swift - 流程控制

文章目录 Swift - 流程控制if-else2. while3. for3.1 闭区间运算符3.2 半开区间运算符3.3 for - 区间运算符用在数组上3.3.1 单侧区间 3.4 区间类型3.5 带间隔的区间值 4. switch4.1 fallthrough4.2 switch注意点 5. 复合条件6. 区间匹配、元组匹配7. 值绑定8. where9. 标签语句…

DRF JWT认证进阶

JWT认证进阶 【0】准备工作 &#xff08;1&#xff09;模型准备 模型准备&#xff08;继承django的auth_user表&#xff09; from django.db import models from django.contrib.auth.models import AbstractUserclass UserInfo(AbstractUser):mobile models.CharField(ma…

c++ opencv

文章目录 错误1. C2039 "channels": 不是 "cv::DataType<_Tp>" 的成员2. 注意cv::mat的类型3. cv::mat求inv4. vector subscript out of range5. 使用determinant求行列式注意点 其他1.Vec3b的赋值与访问2. cv::mean3. 将cv::mat三通道改为单通道且保…

C语言——内存函数的实现与模拟

1. memcpy 函数 与strcpy 函数类似 1.头文件 <string.h> 2.基本格式 • 函数memcpy从source的位置开始向后复制num个 字节 的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0…

2024年钉钉直播回放怎么下载

又到了2024年,最近钉钉迎来了一波更新,经过我的研究,总算研究出来了一个方法,并且做成了工具 首先&#xff0c;让我们了解一下钉钉直播回放的下载方法。 钉钉直播回放工具链接&#xff1a;https://pan.baidu.com/s/1oPWJOp8L2SBDlklt_t5WQQ?pwd1234 提取码&#xff1a;1234 -…

sml emacs 安装问题记录

sml & emacs 安装问题记录 可以直接用brew装&#xff0c;很方便 brew install --cask emacsbrew install smlnj --cask安装完smlng后测试sml命令 确认可以正常运行 如果找不到命令&#xff0c;需要配置环境变量 确认终端使用的是 zsh 还是 bash, 使用 echo $SHELL如果是zs…

Python Web开发框架详解:Django与Flask的比较与实践

Python Web开发框架详解&#xff1a;Django与Flask的比较与实践 在Python的Web开发领域&#xff0c;Django和Flask是两个非常受欢迎的框架。它们各自具有独特的特点和优势&#xff0c;适用于不同的开发场景。本文将对这两个框架进行详细的解释和比较&#xff0c;并给出一些实用…

【快速上手ESP32(基于ESP-IDFVSCode)】10-事件循环WiFi

事件循环 本来这篇文章是只写WiFi的&#xff0c;但是写的时候才发现离不开事件循环&#xff0c;因此再多添一点内容在WiFi前面。 事件循环简单来说就是一个&#xff08;循&#xff09;环&#xff0c;我们可以在这个环上绑上一些事件&#xff0c;我们也可以监听这个环&#xf…

JavaScript进阶(十五):JS 垃圾回收机制_vue gc

内存&#xff1a;由可读写单元组成&#xff0c;表示一片可操作空间&#xff1b;管理&#xff1a;人为的去操作一片空间的申请、使用和释放&#xff1b;内存管理&#xff1a;开发者主动申请空间、使用空间、释放空间&#xff1b;管理流程&#xff1a;申请-使用-释放&#xff1b;…

CodeTalker 踩坑实录

开源地址 GitHub - Doubiiu/CodeTalker: [CVPR 2023] CodeTalker: Speech-Driven 3D Facial Animation with Discrete Motion Prior 提供了预训练 运行报错 File "D:\Program Files\miniconda3\lib\site-packages\transformers\models\wav2vec2\modeling_wav2vec2.py&quo…

oracle sql monitor简单使用说明

一 sql monitor介绍 二 用命令行方式生成sql monitor报告 set long 1000000 set longchunksize 100000 set linesize 1000 set pagesize 0 set trim on set trimspool on set echo off set feedback off spool report_sql_monitor.html select dbms_sqltune.report_s…

线性代数-行列式-p1 矩阵的秩

目录 1.定义 2. 计算矩阵的秩 3. 矩阵的秩性质 1.定义 2. 计算矩阵的秩 3. 矩阵的秩性质

美国言语听力学会(ASHA)关于非处方 (OTC) 助听器的媒体声明(翻译稿)

美国国会于 2021 年 4 月 13 日批准美国听力学会积极提供建议&#xff0c;并一直积极参与制定FDA关于非处方助听器销售的拟议法规。根据2017年通过的立法授权。学院积极参与帮助塑造授权立法&#xff0c;并就即将出台的条例分享了建议。 根据美国卫生与公众服务部NIH / NIDCD的…

用Python绘制了几张有趣的可视化图表

流程图存在于我们生活的方方面面&#xff0c;对于我们追踪项目的进展&#xff0c;做出各种事情的决策都有着巨大的帮助&#xff0c;而对于的Python而言呢&#xff0c;绘制流程图也是十分轻松的&#xff0c;今天小编就来为大家介绍两个用于绘制流程图的模块&#xff0c;我们先来…

基于Web的停车场管理系统设计与实现:技术总结与展望

引言 随着社会经济的快速发展&#xff0c;汽车保有量的激增使得停车难问题日益凸显。为了有效解决这一问题&#xff0c;本人在导师的指导下&#xff0c;设计并实现了一套基于Web的停车场管理系统。本文将从技术角度出发&#xff0c;详细总结本系统的设计思路、技术细节以及实现…