黑马智数Day3
渲染基础Table列表

封装接口:
export function getCardListAPI(params) {return request({url: '/parking/card/list',params})
}
具体实现:
import { getCardListAPI } from '@/apis/card'export default {data() {return {// 请求参数params: {page: 1,pageSize: 10},// 月卡列表cardList: []}},mounted() {this.getCardList()},methods: {async getCardList() {const res = await getCardListAPI(this.params)this.cardList = res.data.rows}}}
<el-table style="width: 100%" :data="cardList"><el-table-column type="index" label="序号" /><el-table-column label="车主名称" prop="personName" /><el-table-column label="联系方式" prop="phoneNumber" /><el-table-column label="车牌号码" prop="carNumber" /><el-table-column label="车辆品牌" prop="carBrand" /><el-table-column label="剩余有效天数" prop="totalEffectiveDate" /><el-table-column label="操作" fixed="right" width="180"><template #default="scope"><el-button size="mini" type="text">续费</el-button><el-button size="mini" type="text">查看</el-button><el-button size="mini" type="text">编辑</el-button><el-button size="mini" type="text">删除</el-button></template></el-table-column></el-table>
适配状态显示
<el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />formatStatus(row) {const MAP = {0: '可用',1: '已过期'}return MAP[row.cardStatus]
}
分页功能实现
1. 页数分出来
2. 点击每页的时候获取当前页的数据重新渲染到table上
1. 通过实践获取到当前点击的是第几页
2. 以当前拿到的页数作为参数去和后端要数据
3. 把获取到的当前页的列表数据重新渲染到table组件上
搜索功能实现
收集查询字段数据
<!-- 搜索区域 -->
<div class="search-container"><span class="search-label">车牌号码:</span><el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" /><span class="search-label">车主姓名:</span><el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" /><span class="search-label">状态:</span><el-select v-model="params.cardStatus"><el-optionv-for="item in cardStatusList":key="item.id":value="item.id":label="item.name"/></el-select><el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>
</divdata() {return {// 请求参数params: {page: 1,pageSize: 5,carNumber: null,personName: null,cardStatus: null},// 月卡状态cardStatusList: [{id: null,name: '全部'},{id: 0,name: '可用'},{id: 1,name: '已过期'}]}}
调用接口获取数据
doSearch() {// 调用接口之前把页数参数重置为1this.params.page = 1this.getCardList()
}<el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>
相关文章:
黑马智数Day3
渲染基础Table列表 封装接口: export function getCardListAPI(params) {return request({url: /parking/card/list,params}) } 具体实现: import { getCardListAPI } from /apis/cardexport default {data() {return {// 请求参数params: {page: 1,pa…...
【Java】再一次踩了整数溢出的坑
【Java】再一次踩了整数溢出的坑 一、起因原题示例 1示例 2提示 我的代码提交结果 二、思考修改后的代码如下 三、知识点1. int m l ((r - l) / 2)解释 2. if (m < x / m)解释 四、结尾 一、起因 我在做【力扣】69.x 的平方根 一题的时候,明明觉得逻辑没问题&…...
Windows开发工具使用技巧大揭秘:让编码效率翻倍的秘籍!
【ACM出版|厦大主办|EI稳定检索】第五届计算机科学与管理科技国际学术会议(ICCSMT 2024)_艾思科蓝_学术一站式服务平台 更多学术会议请看:学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录 引言 1. 快捷键大全:加速你的编码…...
CSS外边距
元素的外边距(margin)是围绕在元素边框以外(不包括边框)的空白区域,这片区域不受 background 属性的影响,始终是透明的。 为元素设置外边距 默认情况下如果不设置外边距属性,HTML 元素就是不会…...
C++ set,multiset与map,multimap的基本使用
1. 序列式容器和关联式容器 string、vector、list、deque、array、forward_list等STL容器统称为序列式容器,因为逻辑结构为线性序列的数据结构,两个位置存储的值之间一般没有紧密的关联关系,比如交换一下,他依旧是序列式容器。顺…...
评估潜力无限:解读自闭症患者的工作能力评估
在星贝育园这片充满爱与希望的土地上,我们不仅见证了无数自闭症儿童在康复训练中的点滴进步,更深刻理解了他们内在潜力的无限可能。自闭症,这一复杂的神经发育障碍,常常让外界对其患者的工作能力产生误解和偏见。然而,…...
js 实现视频封面截图
今天给大家分享一下,如何实现视频封面截取功能,这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识,话不多说,直接上代码: <template><div><div class"margin-tb-sm"><…...
Hadoop FileSystem Shell 常用操作命令
提示:本文章只总结一下常用的哈,详细的命令大家可以移步官方的文档(链接贴在下面了哈🤣)— HDFS官方命令手册链接。 目录 1. cat 命令:查看 HDFS 文件内容2. put 命令:将本地文件上传到 HDFS3.…...
uniapp EChars图表
1. uniapp EChars图表 (1)Apache ECharts 一个基于 JavaScript 的开源可视化图表库 https://echarts.apache.org/examples/zh/index.html (1)官网图例 (2)个人实现图例 1.1. 下载echart 1.1.1. 下…...
最新版ingress-nginx-controller安装 使用host主机模式
最新版ingress-nginx-controller安装 使用host主机模式 文章目录 最新版ingress-nginx-controller安装 使用host主机模式单节点安装方式多节点高可用安装方式 官方参考链接: https://github.com/kubernetes/ingress-nginx/ https://kubernetes.github.io/ingress-ng…...
实习问题(配置文件获取参数)
Java中用SpringBoot框架,当我们要获取配置文件yml里的参数时,用Value注解获取 如果配置文件中没有srvSealUploadPath这个参数的话,可以用Value("${srvSealUploadPath:data/idoc/temp}"),这个的意思是,如果配…...
C#测试调用Ghostscript.NET浏览PDF文件
Ghostscript.NET是针对Ghostscript的C#封装库,支持解析PostScript语言、操作PDF文件等。使用Ghostscript.NET的GhostscriptViewer 模块可以以图片形式查看PDF文档。本文学习并测试调用Ghostscript.NET模块打开及浏览PDF文件的基本用法。 Ghostscript.NET目前主要…...
MySQL本地安装步骤
下载MySQL ZIP压缩包 访问MySQL官网(https://www.mysql.com/)或下载页面(https://dev.mysql.com/downloads/mysql/)。 在下载页面选择“MySQL Community Server”作为下载目标。 根据你的操作系统(Windows)…...
redisson使用笔记
文章目录 spring集成redisson maven配置yml配置使用redisTemplate和redisson的区别 其他项目中看到redisson,看样子像是redis相关类库,实际也确实是。 还是老规矩,见到的要了解,需要的必须掌握,了解一下吧。 spring集成…...
设计模式之享元(Flyweight)模式
前言 面向对象很好地解决了 “抽象” 的问题,但是不可避免的要付出一定的代价。对于通常情况来讲,面向对象的成本大都可以忽略不计。但是某些情况,面向对象所带来的成本必须谨慎处理 具体需要自己根据需求去评估 定义 “对象性能” 模式。运用…...
桥接(桥梁)模式
简介 桥接模式(Bridge Pattern)又叫作桥梁模式、接口(Interface)模式或柄体(Handle and Body)模式,指将抽象部分与具体实现部分分离,使它们都可以独立地变化,属于结构型…...
语言模型发展史
四个阶段 第一阶段:基于规则和统计的语言模型 由人工设计特征并使用统计方法对固定长度的文本窗口序列进行建模分析,这种建模方式也被称为N-gram语言模型。 优点: 1)采用极大似然估计, 参数易训练 2)完全包含了前n-…...
【Linux】模拟实现一个shell
接受每一个人的批评,可是保留你自己的判断。 ——莎士比亚 一段时间的没有更新是由于最近开学期间比较的忙,同时也是由于刚开学的几门课才学习的时候有点迷糊,需要在学校课堂上花的时间更多了,所以才没有更新的,求放过…...
云原生数据库 PolarDB
简介:云原生数据库 PolarDB 是阿里云自研产品,在存储计算分离架构下,利用了软硬件结合的优势,为用户提供秒级弹性、高性能、海量存储、安全可靠的数据库服务。100%兼容MySQL和PostgreSQL生态,支持分布式扩展࿰…...
MobaXterm基本使用 -- 服务器状态、批量操作、显示/切换中文字体、修复zsh按键失灵
监控服务器资源 参考网址:https://www.cnblogs.com/144823836yj/p/12126314.html 显示效果 MobaXterm提供有这项功能,在会话窗口底部,显示服务器资源使用情况 如内存、CPU、网速、磁盘使用等: (完整窗口࿰…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
