Vue.js中实现JSON数据电子邮件搜索及表格展示教程

array.find(callback(element[, index[, array]])[, thisArg])

<template>
  <div class="email-search-container">
    <h2>电子邮件地址搜索</h2>
    <div class="search-input-group">
      <label for="searchEmail">输入要搜索的电子邮件：</label>
      <input type="email" id="searchEmail" v-model="searchEmail" @keyup.enter="searchByEmail" placeholder="例如: user@example.com">
      <button @click="searchByEmail">搜索</button>
    </div>

    <div v-if="foundUser" class="result-table">
      <h3>搜索结果</h3>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>电子邮件</th>
            <th>注册日期</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ foundUser.Id }}</td>
            <td>{{ foundUser.Name }}</td>
            <td>{{ foundUser.Email }}</td>
            <td>{{ foundUser.RegistrationDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else-if="searched && searchEmail" class="no-result">
      <p>未找到匹配的电子邮件地址 "{{ searchEmail }}"。</p>
    </div>
    <div v-else class="initial-state">
        <p>请输入电子邮件地址进行搜索。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmailSearch',
  data() {
    return {
      searchEmail: '', // 绑定搜索输入框的值
      // 模拟的用户注册数据
      userRegistrationDatas: [
        { Id: 1, Name: '张三', Email: 'zhangsan@example.com', RegistrationDate: '2023-01-01' },
        { Id: 2, Name: '李四', Email: 'lisi@example.com', RegistrationDate: '2023-02-15' },
        { Id: 3, Name: '王五', Email: 'wangwu@example.com', RegistrationDate: '2023-03-20' },
        { Id: 4, Name: '赵六', Email: 'zhaoliu@example.com', RegistrationDate: '2023-04-10' },
        { Id: 5, Name: '钱七', Email: 'qianqi@example.com', RegistrationDate: '2023-05-05' },
      ],
      foundUser: null, // 用于存储搜索到的用户对象
      searched: false, // 标记是否已经执行过搜索操作
    };
  },
  methods: {
    /**
     * 根据输入的电子邮件地址搜索用户。
     */
    searchByEmail() {
      this.searched = true; // 标记已执行搜索

      // 如果搜索框为空，则清空结果
      if (!this.searchEmail) {
        this.foundUser = null;
        return;
      }

      // 使用 find 方法搜索匹配的电子邮件地址
      // 为了实现大小写不敏感搜索，我们将搜索词和数据中的邮件地址都转换为小写进行比较。
      this.foundUser = this.userRegistrationDatas.find(user =>
        user?.Email?.toLowerCase() === this.searchEmail.toLowerCase()
      );
    },
  },
};
</script>

<style scoped>
.email-search-container {
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
  color: #333;
  text-align: center;
  margin-bottom: 25px;
}
.search-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  gap: 10px;
}
.search-input-group label {
  font-weight: bold;
  color: #555;
}
.search-input-group input[type="email"] {
  flex-grow: 1;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease-in-out;
}
.search-input-group input[type="email"]:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.search-input-group button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}
.search-input-group button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}
.search-input-group button:active {
  transform: translateY(0);
}

.result-table {
  margin-top: 20px;
}
.result-table h3 {
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}
.result-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden; /* Ensures rounded corners apply to content */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.result-table th, .result-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  text-align: left;
}
.result-table th {
  background-color: #e9ecef;
  font-weight: bold;
  color: #495057;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.result-table td {
  color: #666;
  font-size: 0.95rem;
}
.result-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}
.result-table tbody tr:hover {
  background-color: #e2f3ff;
  transition: background-color 0.2s ease-in-out;
}

.no-result, .initial-state {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-size: 1.05rem;
}
.no-result {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.initial-state {
  background-color: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}
</style>