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

server/2024/11/19 3:16:27/

前言:

本文代码使用vue2+element UI。

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

效果展示:

完整代码:

javascript"><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.ppmy.cn/server/143060.html

相关文章

【MySQL】MySQL中的函数之JSON_REPLACE

在 MySQL 中&#xff0c;JSON_REPLACE() 函数用于在 JSON 文档中替换现有的值。如果指定的路径不存在&#xff0c;则 JSON_REPLACE() 不会修改 JSON 文档。如果需要添加新的键值对&#xff0c;可以使用 JSON_SET() 函数。 基本语法 JSON_REPLACE(json_doc, path, val[, path,…

React--》如何高效管理前端环境变量:开发与生产环境配置详解

在前端开发中&#xff0c;如何让项目在不同环境下表现得更为灵活与高效&#xff0c;是每个开发者必须面对的挑战&#xff0c;从开发阶段的调试到生产环境的优化&#xff0c;环境变量配置无疑是其中的关键。 env配置文件&#xff1a;通常用于管理项目的环境变量&#xff0c;环境…

java 读取 有时需要sc.nextLine();读取换行符 有时不需要sc.nextLine();读取换行符 详解

在 Java 中&#xff0c;使用 Scanner 类读取输入时&#xff0c;换行符的处理行为取决于所用的读取方法。不同方法的工作原理会影响是否需要额外调用 sc.nextLine() 来清理缓冲区中的换行符。 核心问题 根本原因&#xff1a;Scanner 是基于输入流工作的&#xff0c;而换行符&am…

Python中的with语句

with语句和上下文管理器 Python提供了 with 语句的写法&#xff0c;既简单又安全 文件操作的时候使用with语句可以自动调用关闭文件操作&#xff0c;即使出现异常也会自动关闭文件操作。 # 1、以写的方式打开文件 with open(1.txt, w) as f:# 2、读取文件内容f.write(hello wor…

关于网络安全里蜜罐的详细介绍

蜜罐的定义 蜜罐的一个定义来自间谍世界&#xff0c;玛塔哈里 (Mata Hari) 式的间谍将恋爱关系用作窃取秘密的方式&#xff0c;被描述为设置“美人计”或“蜜罐”。经常会有敌方间谍中了美人计&#xff0c;然后被迫交待他/她所知道的一切。 在计算机安全方面&#xff0c;网络…

kafka可视化管理平台-kafka-console-ui

安装包 kafka可视化管理平台 一款轻量级的kafka可视化管理平台&#xff0c;安装配置快捷、简单易用。 为了开发的省事&#xff0c;没有国际化支持&#xff0c;页面只支持中文展示。 用过rocketmq-console吧&#xff0c;对&#xff0c;前端展示风格跟那个有点类似。 你的安装好…

Centos安装Elasticsearch教程

网上相关的安装教程有很多&#xff0c;基本是官网下载、解压、启动完事了&#xff0c;本文主要记录个人在实际安装过程终于到的问题&#xff0c;如果你刚好也刷到了这篇文档&#xff0c;希望对你有所帮助。 操作系统版本&#xff1a;Centos7Elasticsearch版本&#xff1a;7.9.3…

Python爬虫下载新闻,Flask展现新闻(2)

上篇讲了用Python从新闻网站上下载新闻&#xff0c;本篇讲用Flask展现新闻。关于Flask安装网上好多教程&#xff0c;不赘述。下面主要讲 HTML-Flask-数据 的关系。 简洁版 如图&#xff0c;页面简单&#xff0c;主要显示新闻标题。 分页&#xff0c;使用最简单的分页技术&…