<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-input
        v-model="searchText"
        placeholder="请输入搜索内容"
        style="width: 300px; margin-right: 10px"
        @input="handleSearch"
      ></el-input>
      <el-select v-model="searchType" placeholder="请选择筛选方式" style="width: 150px" @change="handleSearch">
        <el-option label="模糊筛选" value="fuzzy"></el-option>
        <el-option label="精确筛选" value="exact"></el-option>
      </el-select>
    </div>
    <el-table :data="filteredTableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", age: 25, email: "zhangsan@example.com" },
        { id: 2, name: "李四", age: 30, email: "lisi@example.com" },
        { id: 3, name: "王五", age: 28, email: "wangwu@example.com" },
        { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com" },
      ],
      searchText: "",
      searchType: "fuzzy",
      filteredTableData: [], // 用于存储筛选后的数据
    };
  },
  created() {
    // 初始化筛选后的数据，确保表格一开始显示所有数据
    this.filteredTableData = this.tableData;
  },
  methods: {
    handleSearch() {
      // 当搜索文本或搜索类型发生变化时，触发筛选逻辑
      const { searchText, searchType, tableData } = this;
      if (!searchText) {
        // 如果没有搜索文本，显示所有数据
        this.filteredTableData = tableData;
        return;
      }

      this.filteredTableData = tableData.filter((item) => {
        const lowerSearchText = searchText.toLowerCase(); // 将搜索文本转换为小写，以便进行大小写不敏感的比较
        const name = item.name.toLowerCase(); // 将姓名字段转换为小写

        if (searchType === "fuzzy") {
          // 模糊筛选：检查姓名字段是否包含搜索文本
          return name.includes(lowerSearchText);
        } else if (searchType === "exact") {
          // 精确筛选：检查姓名字段是否完全匹配搜索文本
          return name === lowerSearchText;
        }
        return false; // 如果不符合任何筛选条件，返回 false，表示该数据不显示
      });
    },
  },
};
</script>