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

前言:

本文代码使用vue2+element UI。

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

效果展示:

完整代码:

javascript 复制代码
<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数组,即不做任何筛选,返回全部数据;

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

相关推荐
@大迁世界几秒前
释放 PWA 的力量:2024 年的现代Web应用|React + TypeScript 示例
前端·javascript·react.js·前端框架·ecmascript
宅博士小陈几秒前
NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍
前端·javascript·vue.js
布兰妮甜8 分钟前
Angular框架:构建现代Web应用的全面指南
前端·javascript·前端框架·angular.js
雪碧聊技术42 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan1 小时前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
前端青山1 小时前
webpack指南
开发语言·前端·javascript·webpack·前端框架
程序媛小果2 小时前
基于java+SpringBoot+Vue的桂林旅游景点导游平台设计与实现
java·vue.js·spring boot
还是大剑师兰特3 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts