Vue2+ElementUI利用计算属性实现搜索框功能
作者：边洛洛
这篇文章主要为大家详细介绍了Vue2和ElementUI如何利用计算属性实现搜索框功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
前言
本文代码使用vue2+element UI。
输入框搜索的功能，可以在前端通过计算属性过滤实现，也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤，后附完整代码，代码中提供的是死数据，可供学习使用。
效果展示
完整代码
<template>
<div class="container">
<h1 class="page-title">兴奋剂系统数据展示</h1>
<!-- 搜索框 -->
<el-input
v-model="searchTerm"
placeholder="搜索单位、姓名或身份证号"
prefix-icon="el-icon-search"
clearable
class="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数组，即不做任何筛选，返回全部数据；
②当用户输入数据时，则进行匹配过滤。
到此这篇关于Vue2+ElementUI利用计算属性实现搜索框功能的文章就介绍到这了,更多相关Vue2搜索框功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！