Vue2+ElementUI:用计算属性实现搜索框功能

前言:

本文代码使用vue2+element UI。

输入框搜索的功能,可以在前端通过计算属性过滤实现,也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤,后附完整代码,代码中提供的是死数据,可供学习使用。

效果展示:

完整代码:

<template><div class="container"><h1 class="page-title">兴奋剂系统数据展示</h1><!-- 搜索框 --><el-inputv-model="searchTerm"placeholder="搜索单位、姓名或身份证号"prefix-icon="el-icon-search"clearableclass="search-input"></el-input><!-- 数据表格 --><el-table :data="filteredData" border=""><el-table-column prop="unit" label="单位" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="idNumber" label="身份证号"></el-table-column></el-table><!-- 没有数据时显示 --><div v-if="filteredData.length === 0" class="empty-message">没有找到匹配的结果</div></div>
</template><script>
export default {data() {return {searchTerm: "",mockImportedData: [{ unit: "北京队", name: "张三", idNumber: "110101199001011234" },{ unit: "上海队", name: "李四", idNumber: "310101199203033456" },{ unit: "广州队", name: "王五", idNumber: "440101199405055678" },{ unit: "深圳队", name: "赵六", idNumber: "440301199607077890" },{ unit: "北京队", name: "刘七", idNumber: "110101199809099012" },],};},computed: {filteredData() {const lowercasedSearch = this.searchTerm.toLowerCase();return this.mockImportedData.filter((item) =>item.unit.toLowerCase().includes(lowercasedSearch) ||item.name.toLowerCase().includes(lowercasedSearch) ||item.idNumber.includes(this.searchTerm));},},
};
</script><style lang="scss" scoped>
/* 容器整体样式 */
.container {padding: 15px;.page-title {font-size: 24px;font-weight: bold;margin: 5px 0;}.search-input {padding: 10px 0;margin-bottom: 10px;}/* 表格容器样式 */.table-wrapper {margin-top: 20px;}/* 空结果提示 */.empty-message {text-align: center;margin-top: 20px;color: #a0aec0;}
}
</style>

知识点:

1. 数组的filter()方法:

上述代码中filter() 方法会遍历 mockImportedData 中的每个数据项,对每一项执行回调函数进行判断,满足以下任意一个条件,才会保留在数组中。

2.空字符串匹配逻辑

在 JavaScript 中,任何字符串调用 .includes("") 都会返回 true

这意味着空字符串会被视为“包含在任何字符串中”。

所以①当用户不输入任何数据,即searchTerm为空时,filter()返回原始的mockImportedData数组,即不做任何筛选,返回全部数据;

②当用户输入数据时,则进行匹配过滤。

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

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

相关文章

blind-watermark - 水印绑定

文章目录 一、关于 blind-watermark安装 二、bash 中使用三、Python 调用1、基本使用2、attacks on Watermarked Image3、embed images4、embed array of bits 四、并发五、相关 Project 一、关于 blind-watermark Blind watermark 基于 DWT-DCT-SVD. github : https://githu…

【小白可懂】微信小程序---课表渲染

结果展示&#xff1a;&#xff08;代码在最后&#xff09; WeChat_20241116174431 项目简介 在数字化校园建设的大背景下&#xff0c;为了更好地服务于在校师生&#xff0c;我们开发了一款基于微信小程序的课表管理系统。该系统采用了现代化的前端技术和优雅的设计风格&#x…

Kafka一些常用的命令行操作【包含主题命令、生产者和消费者命令】

文章目录 1、主题命令2、生产者命令行操作3、消费者命令行操作 1、主题命令 查看当前服务器中的所有 topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --list 创建topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --create --topic to…

C# x Unity 从玩家控制类去分析命令模式该如何使用

本文部分内容出自游戏编程模式一书,游戏编程模式,有兴趣的小伙伴可以去看看,虽然不是unity x c#写的 但是思路挺好的 目录 目录 0.先说结论 发现问题 命令模式如何解耦 打个断点更利于分析 怎么实现延迟命令? 如何撤销命令? 脚本整体一览 不足分析(AI) 0.先说结论 …

Day44 | 动态规划 :状态机DP 买卖股票的最佳时机IV买卖股票的最佳时机III

Day44 | 动态规划 &#xff1a;状态机DP 买卖股票的最佳时机IV&&买卖股票的最佳时机III&&309.买卖股票的最佳时机含冷冻期 动态规划应该如何学习&#xff1f;-CSDN博客 本次题解参考自灵神的做法&#xff0c;大家也多多支持灵神的题解 买卖股票的最佳时机【…

IDEA2024:右下角显示内存

使用场景&#xff1a; 实时知晓idea内存使用情况 解决方案: 开启内存显示 View -> Apperance -> Status Bar Widgets -> Memory Indicator 效果如下&#xff1a;

HBase理论_背景特点及数据单元及与Hive对比

本文结合了个人的笔记以及工作中实践经验以及参考HBase官网&#xff0c;我尽可能把自己的知识点呈现出来&#xff0c;如果有误&#xff0c;还请指正。 1. HBase背景 HBase作为面向列的数据库运行在HDFS之上&#xff0c;HDFS缺乏随机读写操作&#xff0c;HBase正是为此而出现。…

git创建远程仓库,以gitee码云为例GitHub同理

git远程Remote服务端仓库构建的视频教程在这 Git建立服务端Remote远程仓库&#xff0c;gitee码云例&#xff0c;Github_哔哩哔哩_bilibili 1、登gitee码云/Github 登录 - Gitee.com https://github.com/ &#xff08;没账号的注册一下就行&#xff09; 点击如下图位置的创…

windows工具 -- 使用rustdesk和云服务器自建远程桌面服务, 手机, PC, Mac, Linux远程桌面 (简洁明了)

目的 向日葵最先放弃了, todesk某些功能需要收费, 不想用了想要 自己搭建远程桌面 自己使用希望可以电脑 控制手机分辨率高一些 原理理解 ubuntu云服务器配置 够买好自己的云服务器, 安装 Ubuntu操作系统 点击下载 hbbr 和 hbbs 两个 deb文件: https://github.com/rustdesk/…

计算机网络各层设备总结归纳(更新ing)

计算机网络按照OSI&#xff08;开放式系统互联&#xff09;模型分为七层&#xff0c;每一层都有其特定的功能和对应的网络设备。以下是各层对应的设备&#xff1a; 1. 物理层&#xff08;Physical Layer) 设备&#xff1a;中继器&#xff08;Repeater&#xff09;、集线器…

Oracle19C AWR报告分析之Wait Classes by Total Wait Time

Oracle19C AWR报告分析之Wait Classes by Total Wait Time 一、分析数据二、详细分析2.1 指标参数介绍2.2 数据库性能分析2.3 综合性能评估 在 Oracle 数据库的 AWR 报告中&#xff0c;Wait Classes by Total Wait Time 是评估数据库性能的重要部分。本篇文章主要是介绍指标参数…

基本数据类型和包装类型的区别、缓存池、自动拆箱装箱(面试题)

目录 1. 八种基本类型及对应包装类型 2. 基本类型和包装类型 区别 3. 自动拆箱装箱 3.1 自动装箱 3.2 自动拆箱 3.3 缓存池 4. 高频面试案例分析 1. 八种基本类型及对应包装类型 基本数据类型类型描述范围&#xff08;指数形式&#xff09;位数包装类型byte整型&#x…

Python酷库之旅-第三方库Pandas(221)

目录 一、用法精讲 1036、pandas.DatetimeIndex.to_pydatetime方法 1036-1、语法 1036-2、参数 1036-3、功能 1036-4、返回值 1036-5、说明 1036-6、用法 1036-6-1、数据准备 1036-6-2、代码示例 1036-6-3、结果输出 1037、pandas.DatetimeIndex.to_series方法 10…

基于SpringBoot网上超市的设计与实现录像

基于SpringBoot网上超市的设计与实现录像 SpringBoot网上超市的设计与实现录像

【vmware+ubuntu16.04】vm虚拟机及镜像安装-tools安装包弹不出来问题

学习机器人这门课需要下载虚拟机&#xff0c;做一下记录 首先我下载的是vm虚拟机16&#xff0c; 下载版本可参考该文章课堂上我下载 的镜像是16.04&#xff0c;虚拟机安装教程和镜像添加可参考该博主 按照教程安装成功 安装tools&#xff0c;但是我的弹不出来那个压缩包&…

ssm126基于HTML5的出租车管理系统+jsp(论文+源码)_kaic

设计题目&#xff1a;出租车管理系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以…

游戏引擎学习第14天

视频参考:https://www.bilibili.com/video/BV1iNUeYEEj4/ 1. 为什么关注内存管理&#xff1f; 内存分配是潜在的失败点&#xff1a; 每次进行内存分配&#xff08;malloc、new等&#xff09;时&#xff0c;都可能失败&#xff08;例如内存不足&#xff09;。这种失败会引入不稳…

阿里云引领智算集群网络架构的新一轮变革

阿里云引领智算集群网络架构的新一轮变革 云布道师 11 月 8 日~ 10 日在江苏张家港召开的 CCF ChinaNet&#xff08;即中国网络大会&#xff09;上&#xff0c;众多院士、教授和业界技术领袖齐聚一堂&#xff0c;畅谈网络未来的发展方向&#xff0c;聚焦智算集群网络的创新变…

【更新至2023】A股上市公司企业突破性创新、渐进性创新数据(2000-2023年)

测算方式&#xff1a;参考C刊《财经问题研究》胡山&#xff08;2022&#xff09;老师的研究&#xff0c;用当年获得授权的发明专利数量加 1 后取自然对数来衡量企业突破性创新 ( Invention) ; 用非发明专利 ( 包括实用新型专利和外观设计专利) 授权量加 1 后取自然对数来衡量企…

【Android、IOS、Flutter、鸿蒙、ReactNative 】启动页

Android 设置启动页 自定义 splash.xml 通过themes.xml配置启动页背景图 IOS 设置启动页 LaunchScreen.storyboard 设置为启动页 storyboard页面绘制 Assets.xcassets 目录下导入图片 AppLogo Flutter 设置启动页 Flutter Android 设置启动页 自定义 launch_background.xm…