快捷導(dǎo)航

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

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

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

前言

本文代碼使用vue2+element UI。

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

效果展示

完整代碼

<template>
  <div class="container">
    <h1 class="page-title">興奮劑系統(tǒng)數(shù)據(jù)展示</h1>
 
    <!-- 搜索框 -->
    <el-input
      v-model="searchTerm"
      placeholder="搜索單位、姓名或身份證號(hào)"
      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="身份證號(hào)"></el-table-column>
    </el-table>
 
    <!-- 沒(méi)有數(shù)據(jù)時(shí)顯示 -->
    <div v-if="filteredData.length === 0" class="empty-message">
      沒(méi)有找到匹配的結(jié)果
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchTerm: "",
      mockImportedData: [
        { unit: "北京隊(duì)", name: "張三", idNumber: "110101199001011234" },
        { unit: "上海隊(duì)", name: "李四", idNumber: "310101199203033456" },
        { unit: "廣州隊(duì)", name: "王五", idNumber: "440101199405055678" },
        { unit: "深圳隊(duì)", name: "趙六", idNumber: "440301199607077890" },
        { unit: "北京隊(duì)", 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>

知識(shí)點(diǎn)：

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

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

2.空字符串匹配邏輯

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

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

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

②當(dāng)用戶(hù)輸入數(shù)據(jù)時(shí)，則進(jìn)行匹配過(guò)濾。

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

您可能感興趣的文章: