Vue2+ElementUI利用計算屬性實現(xiàn)搜索框功能

更新時間：2024年11月13日 14:40:38 作者：邊洛洛

這篇文章主要為大家詳細介紹了Vue2和ElementUI如何利用計算屬性實現(xiàn)搜索框功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下

前言

本文代碼使用vue2+element UI。

輸入框搜索的功能，可以在前端通過計算屬性過濾實現(xiàn)，也可以調(diào)用后端寫好的接口。本文介紹的是通過計算屬性對表格數(shù)據(jù)實時過濾，后附完整代碼，代碼中提供的是死數(shù)據(jù)，可供學習使用。

效果展示

完整代碼

<template>
  <div class="container">
    <h1 class="page-title">興奮劑系統(tǒng)數(shù)據(jù)展示</h1>
 
    <!-- 搜索框 -->
    <el-input
      v-model="searchTerm"
      placeholder="搜索單位、姓名或身份證號"
      prefix-icon="el-icon-search"
      clearable
      class="search-input"
    >
    </el-input>
 
    <!-- 數(shù)據(jù)表格 -->
    <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>
 
    <!-- 沒有數(shù)據(jù)時顯示 -->
    <div v-if="filteredData.length === 0" class="empty-message">
      沒有找到匹配的結(jié)果
    </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;
  }
 
  /* 空結(jié)果提示 */
  .empty-message {
    text-align: center;
    margin-top: 20px;
    color: #a0aec0;
  }
}
</style>

知識點：

1. 數(shù)組的filter()方法：

上述代碼中filter() 方法會遍歷 mockImportedData 中的每個數(shù)據(jù)項，對每一項執(zhí)行回調(diào)函數(shù)進行判斷，滿足以下任意一個條件,才會保留在數(shù)組中。

2.空字符串匹配邏輯

在 JavaScript 中，任何字符串調(diào)用 .includes("") 都會返回 true。

這意味著空字符串會被視為“包含在任何字符串中”。

所以①當用戶不輸入任何數(shù)據(jù)，即searchTerm為空時，filter()返回原始的mockImportedData數(shù)組，即不做任何篩選，返回全部數(shù)據(jù)；

②當用戶輸入數(shù)據(jù)時，則進行匹配過濾。

到此這篇關于Vue2+ElementUI利用計算屬性實現(xiàn)搜索框功能的文章就介紹到這了,更多相關Vue2搜索框功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: