在Vue.js中实现JSON对象邮箱地址搜索并展示到表格

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

    <div v-if="searched && !userRegistrationGridTable" class="no-result-message">
      <p>未找到匹配 "{{ lastSearchEmail }}" 的邮箱地址。</p>
    </div>

    <div v-if="userRegistrationGridTable" class="result-table-container">
      <h3>搜索结果：</h3>
      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>注册日期</th>
            <!-- 根据实际数据结构添加更多列 -->
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ userRegistrationGridTable.id }}</td>
            <td>{{ userRegistrationGridTable.name }}</td>
            <td>{{ userRegistrationGridTable.email }}</td>
            <td>{{ userRegistrationGridTable.registrationDate }}</td>
            <!-- 渲染更多字段 -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟从后端获取的用户注册数据
      userRegistrationDatas: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', registrationDate: '2023-01-15' },
        { id: 2, name: '李四', email: 'lisi@test.com', registrationDate: '2023-02-20' },
        { id: 3, name: '王五', email: 'wangwu@domain.org', registrationDate: '2023-03-10' },
        { id: 4, name: '赵六', email: 'zhaoliu@example.com', registrationDate: '2023-04-05' },
        { id: 5, name: '钱七', email: 'qianqi@test.com', registrationDate: '2023-05-12' },
      ],
      searchEmail: '', // 用户输入的搜索邮箱
      lastSearchEmail: '', // 记录上一次搜索的邮箱，用于提示
      userRegistrationGridTable: null, // 存储搜索结果，单个对象
      searched: false, // 标记是否已执行过搜索
    };
  },
  methods: {
    /**
     * 执行邮箱搜索操作。
     * 使用 Array.prototype.find() 查找匹配的邮箱地址。
     */
    performSearch() {
      this.searched = true;
      this.lastSearchEmail = this.searchEmail; // 更新上一次搜索的邮箱
      if (!this.searchEmail) {
        this.userRegistrationGridTable = null; // 如果搜索框为空，清空结果
        return;
      }

      // 使用 find 方法查找匹配的邮箱地址
      // 注意：这里假设 userRegistrationDatas 已经是一个数组
      // 如果数据可能为空，可以使用可选链操作符: this.userRegistrationDatas?.find(...)
      this.userRegistrationGridTable = this.userRegistrationDatas.find(
        user => user.email === this.searchEmail
      );

      // 如果需要忽略大小写，可以这样处理：
      // this.userRegistrationGridTable = this.userRegistrationDatas.find(
      //   user => user.email.toLowerCase() === this.searchEmail.toLowerCase()
      // );
    },
  },
};
</script>

<style scoped>
.email-search-container {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 25px;
}

.search-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex-grow: 1;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.search-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #0056b3;
}

.no-result-message {
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.result-table-container {
  margin-top: 30px;
}

h3 {
  color: #555;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.data-table th {
  background-color: #f8f8f8;
  font-weight: bold;
  color: #444;
}

.data-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tbody tr:hover {
  background-color: #f1f1f1;
}
</style>

// 示例：安全地访问可能不存在的数据
this.userRegistrationGridTable = this.userRegistrationDatas?.find(
  user => user?.email === this.searchEmail
);
// 这里的 user?.email 同样是为了防止 user 对象本身或其 email 属性不存在

this.userRegistrationGridTable = this.userRegistrationDatas.find(
  user => user.email.toLowerCase() === this.searchEmail.toLowerCase()
);

// 假设 userRegistrationGridTable 现在用于存储一个数组
this.userRegistrationGridTable = this.userRegistrationDatas.filter(
  user => user.email.toLowerCase() === this.searchEmail.toLowerCase()
);
// 在模板中，你需要使用 v-for 来遍历 userRegistrationGridTable 数组并渲染表格行