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.xdnf.cn/news/13204.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

JAVA学习日记(十二)查找算法

一、基本查找、二分查找 略 二、分块查找 将数组分块&#xff0c;每一个块中最大值小于后一个块中的最小值&#xff1a;块内无序&#xff0c;块间有序。 块&#xff1a;创建一个块类 按照规则划分好块之后&#xff0c;对要查询的值设计方法进行查询。 import java.util.…

多线程小知识

一. CAS CAS (Compare and Swap, 比较并交换) 是一种无锁编程技术, 用于实现多线程环境下对共享资源的线程安全访问. CAS 的核心思想是: 只有当内存中的值与预期值相匹配时, 才会将内存中的值更新为新值. 寄存器1中存放原值, 寄存器2中存放新值. 现在要将内存中的原值更新为新…

C++基础(12.红黑树实现)

目录 红黑树的概念&#xff1a; 红黑树规则&#xff1a; 红黑树如何确保最长路径不超过最短路径的2倍的&#xff1f; 红黑树的效率&#xff1a; 红黑树的插入: 红黑树树插入⼀个值的大概过程: 情况1&#xff1a;变色 情况2&#xff1a;单旋变色&#xff1a; 情况3&…

代码随想录算法训练营第二十天|39. 组合总和、40.组合总和II、131.分割回文串

39. 组合总和 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和&#xff08;对应「leetcode」力扣题目&#xff1a;39.组合总和&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩…

机器学习基础02_特征工程

目录 一、概念 二、API 三、DictVectorize字典列表特征提取 四、CountVectorize文本特征提取 五、TF-IDF文本1特征词的重要程度特征提取 六、无量纲化预处理 1、MinMaxScaler 归一化 2、StandardScaler 标准化 七、特征降维 1、特征选择 VarianceThreshold 底方差…

得物App入选诚信案例,10万正品样品库夯实高品质消费

近日&#xff0c;以“加强企业诚信建设 赋能经济社会发展”为主题的“2024年全国企业诚信建设大会”在烟台市召开。此次大会由中国企业联合会、中国企业家协会主办&#xff0c;山东省企业联合会、山东省企业家协会、烟台市企业联合会、烟台大学承办。大会期间&#xff0c;得物A…

036 RabbitMQ消息确认 死信队列 延时队列

文章目录 生产者确认模式application.propertiesMessageController.javaMessageConfirmRallback.java 生产者回退模式application.propertiesMessageConfirmRallback.javaMessageController.java 消费者手动确认application.propertiesConsumerAckQueueListener.java 死信队列延…

docker desktop运行rabittmq容器,控制台无法访问

docker desktop运行rabittmq容器&#xff0c;控制台无法访问 启动过程&#xff1a;…此处缺略&#xff0c;网上一大堆 原因 原因是在Docker上运行的RabbitMQ&#xff0c;默认情况下是没有启用管理插件和管理页面的 解决办法 使用命令 docker exec -it 容器id /bin/bash 进…

Tailwind 安装使用

Tailwind 安装使用 前言 CSS原子化——本文将详细介绍如何在Vue Vite npm环境下安装、配置并使用Tailwind CSS&#xff01; 文章目录 Tailwind 安装使用前言一、Tailwind 在 Vue Vite 项目中的安装1. 创建Vue项目2. 安装Tailwind CSS3. 初始化Tailwind配置4. 修改文件 tai…

centos7安装playwright踩坑记录

Python版本安装 Installation | Playwright Python 1. 安装pytest-playwright pip3 install pytest-playwright报错&#xff1a;提示找不到pytest-playwright 原因&#xff1a;服务器Python版本3.6.8太低&#xff0c;貌似pytest-playwright最低支持3.7 解决方法&#xff1…

函数(C语言)

1&#xff1a;函数的概念 函数的概念我们在初中的时候就已经听过了。 在C语言中也引入了函数&#xff0c;也可以叫子程序 C语言中的函数就是一个完成某项特定的任务的一小段代码 这段代码是有特殊的写法和调用方法的。其实C语言的程序也是由无数个小的函数组成的。 也就是&…

VMWare安装包及安装过程

虚拟机基本使用 检查自己是否开启虚拟化 如果虚拟化没有开启&#xff0c;需要自行开启&#xff1a;百度加上自己电脑的品牌型号&#xff0c;进入BIOS界面开启 什么是虚拟机 所谓的虚拟机&#xff0c;就是在当前计算机系统中&#xff0c;又开启了一个虚拟系统 这个虚拟系统&…

基于SVD奇异值分解的图像压缩算法(Python实现)

前言 SVD其实和PCA类似&#xff0c;就是丢入一个特征矩阵 X &#xff0c;输出另外一个特征矩阵 X′ , X′ 的维度要比原来的X 要低。并且里面的变量都是原来的变量的线性组合&#xff0c;所以含义也变得不好解释。 简单来说就是数据压缩&#xff0c;特征降维的一种技术&#…

国产AI图片工具,全部免费亲测实用!

近AI生图功能火出圈了&#xff0c;各家大厂都拿出了看家本领&#xff0c;今天就来聊聊即梦AI、通义万相、奇域AI和腾讯元宝的AI生图功能&#xff0c;看看它们各有什么特色吧&#xff01; 一、Dreamina 字节旗下的AI智能平台&#xff0c;简单实用的图片生成&#xff0c;对中国元…

C++ 二叉搜索树

二叉搜索树的概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右…

推荐一款3D建模软件:Agisoft Metashape Pro

Agisoft Metashape Pro是一款强大的多视点三维建模设计辅助软件&#xff0c;Agisoft Metashape是一款独立的软件产品&#xff0c;可对数字图像进行摄影测量处理&#xff0c;并生成3D空间数据&#xff0c;用于GIS应用&#xff0c;文化遗产文档和视觉效果制作&#xff0c;以及间接…

IntelliJ+SpringBoot项目实战(四)--快速上手数据库开发

对于新手学习SpringBoot开发&#xff0c;可能最急迫的事情就是尽快掌握数据库的开发。目前数据库开发主要流行使用Mybatis和Mybatis Plus,不过这2个框架对于新手而言需要一定的时间掌握&#xff0c;如果快速上手数据库开发&#xff0c;可以先按照本文介绍的方式使用JdbcTemplat…

Linux高阶——1110—线程安全问题解决方法

1、同步、异步、阻塞、非阻塞 同步过程&#xff1a;发起调用&#xff0c;调用者需要等待被调用者的结果 异步过程&#xff1a;发起调用&#xff0c;无需等待被调用的结果&#xff0c;当有结果后&#xff0c;此结果传出&#xff0c;无需主动获取 阻塞和非阻塞&#xff1a;发起…

STM32cubemx+Proteus仿真和keil5联合调试

前面两步 STM32cubemx生成代码 https://blog.csdn.net/weixin_52733843/article/details/143637304 Proteus新建工程 https://blog.csdn.net/weixin_52733843/article/details/143578853 1 *Proteus仿真联合调试* 在Proteus中&#xff0c;双击STM32F103C6芯片&#xff0c…

初识算法 · 位运算常见总结(1)

目录 前言&#xff1a; 位运算基本总结 部分题目代码 前言&#xff1a; ​本文的主题是位运算&#xff0c;通过常见的知识点讲解&#xff0c;并且会附上5道简单的题目&#xff0c;5道题目的链接分别为&#xff1a;191. 位1的个数 - 力扣&#xff08;LeetCode&#xff09; 1…