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数组，即不做任何筛选，返回全部数据；

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