Vue.js中JSON数据邮件地址搜索与表格展示教程

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

<template>
  <div class="email-search-container">
    <h2>邮件地址搜索</h2>
    <div class="search-input-group">
      <input
        type="text"
        v-model="searchEmail"
        placeholder="请输入要搜索的邮件地址"
        @keyup.enter="searchUserByEmail"
      />
      <button @click="searchUserByEmail">搜索</button>
    </div>

    <div v-if="gridTableData" class="search-result-table">
      <h3>搜索结果</h3>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮件地址</th>
            <th>注册日期</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ gridTableData.Id }}</td>
            <td>{{ gridTableData.Name }}</td>
            <td>{{ gridTableData.Email }}</td>
            <td>{{ gridTableData.RegistrationDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else-if="searchPerformed" class="no-result">
      <p>未找到匹配的邮件地址。</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟后端返回的用户注册数据
const userRegistrationDatas = ref([
  { Id: 1, Name: '张三', Email: 'zhangsan@example.com', RegistrationDate: '2023-01-15' },
  { Id: 2, Name: '李四', Email: 'lisi@example.com', RegistrationDate: '2023-02-20' },
  { Id: 3, Name: '王五', Email: 'wangwu@example.com', RegistrationDate: '2023-03-10' },
  { Id: 4, Name: '赵六', Email: 'zhaoliu@example.com', RegistrationDate: '2023-04-05' },
  { Id: 5, Name: '钱七', Email: 'qianqi@example.com', RegistrationDate: '2023-05-22' },
]);

// 用户输入的搜索邮件地址
const searchEmail = ref('');
// 存储搜索结果，用于表格展示
const gridTableData = ref(null);
// 标记是否执行过搜索
const searchPerformed = ref(false);

/**
 * 根据输入的邮件地址搜索用户
 */
const searchUserByEmail = () => {
  searchPerformed.value = true; // 标记已执行搜索
  if (!searchEmail.value.trim()) {
    gridTableData.value = null; // 清空搜索结果
    return;
  }

  // 使用 find 方法查找匹配的邮件地址
  // 注意：这里使用了可选链操作符 ?. 以防数据源或元素为空
  gridTableData.value = userRegistrationDatas.value.find(
    (user) => user?.Email === searchEmail.value.trim()
  );
};
</script>

<style scoped>
.email-search-container {
  padding: 20px;
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
h2 {
  color: #333;
  text-align: center;
  margin-bottom: 25px;
}
.search-input-group {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.search-input-group input {
  flex-grow: 1;
  max-width: 300px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 16px;
}
.search-input-group button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}
.search-input-group button:hover {
  background-color: #0056b3;
}
.search-result-table {
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.search-result-table h3 {
  background-color: #e9ecef;
  padding: 10px 15px;
  margin: 0;
  border-bottom: 1px solid #ddd;
  color: #333;
  font-size: 18px;
}
.search-result-table table {
  width: 100%;
  border-collapse: collapse;
}
.search-result-table th, .search-result-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
  font-size: 15px;
}
.search-result-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #555;
}
.no-result {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 5px;
  text-align: center;
}
</style>