Vue搜索功能完整代码解析：模板、逻辑与样式！！！

🔍 Vue搜索功能完整代码解析：模板、逻辑与样式

📌 模板部分 (搜索表单)

<!-- 搜索容器 -->
<div class="filter-container">
  <!-- 操作按钮组 -->
  <div class="operate-bar">
    <el-button type="danger" size="mini" @click="onAdd">添加</el-button>
    <el-button type="primary" size="mini" @click="showTeamList">团伙列表</el-button>
  </div>

  <!-- 搜索表单 -->
  <div class="filter-container-search">
    <!-- 搜索字段选择 -->
    <el-select
      v-model="listQuery.field"
      size="mini"
      filterable
      placeholder="搜索条件"
      style="width: 140px;"
    >
      <el-option
        v-for="item in searchOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <!-- 搜索值输入 -->
    <el-input
      v-model="listQuery.value"
      size="mini"
      placeholder="搜索值"
      style="width: 200px; margin: 0 10px;"
      @keyup.enter.native="handleSearch"
    />

    <!-- 搜索触发按钮 -->
    <el-button 
      type="danger" 
      size="mini" 
      @click="handleSearch"
    >
      搜 索
    </el-button>
  </div>
</div>

---

💻 脚本部分 (核心逻辑)

// 搜索参数对象
private listQuery = {
  page: 1,       // 当前页码（从1开始）
  size: 10,      // 每页数据量
  field: 'id',   // 当前搜索字段
  value: ''      // 搜索关键词
}

// 可搜索字段配置
private searchOptions = [
  { label: '线索ID', value: 'id' },
  { label: '线索标题', value: 'title' },
  { label: '关联商品', value: 'productName' }
]

// 搜索方法
private handleSearch() {
  this.listQuery.page = 1    // 重置到第一页
  this.getList()            // 触发数据获取
}

// 核心数据获取
private async getList() {
  this.loading = true
  try {
    const params = {
      page: this.listQuery.page - 1,  // 后端页码从0开始
      size: this.listQuery.size,
      [this.listQuery.field]: this.listQuery.value || undefined
    }
    
    const res = await listFakeClueFormByPageWithSearch(params)
    if (res?.code === 0) {
      this.list = res.data.content    // 更新表格数据
      this.total = res.data.totalElements // 更新总条数
    }
  } finally {
    this.loading = false
  }
}

---

🎨 样式部分 (SCSS实现)

.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  /* 操作按钮组样式 */
  .operate-bar {
    margin-right: 20px;
    display: flex;
    gap: 10px;

    .el-button {
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
    }
  }

  /* 搜索表单容器 */
  .filter-container-search {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    padding: 8px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    /* 选择器样式 */
    .el-select {
      width: 140px;
      
      .el-input__inner {
        background: #fff;
        border-color: #dcdfe6;
      }
    }

    /* 输入框样式 */
    .el-input {
      margin: 0 10px;
      
      .el-input__inner {
        transition: border-color 0.3s;
        
        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 4px rgba(64,158,255,0.3);
        }
      }
    }

    /* 搜索按钮样式 */
    .el-button {
      padding: 7px 15px;
      border-radius: 3px;
      font-weight: 500;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}

---

🔄 功能流程图解

---

🧠 样式设计思维导图

---

🚀 关键实现亮点

1. 布局方案
   • 使用Flex布局实现自适应排列
   • 操作按钮组与搜索表单分离设计
   • 8px间距系统保证视觉一致性

2. 交互细节

   /* 按钮悬停效果 */
   .el-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   }
   
   /* 输入框聚焦效果 */
   .el-input__inner:focus {
     border-color: #409EFF;
     box-shadow: 0 0 4px rgba(64,158,255,0.3);
   }
   

3. 性能优化
   • 使用transform代替top/left实现动画
   • 避免强制重绘的属性修改
   • 采用CSS3硬件加速

---

📚 最佳实践总结

1. 样式组织原则
   • 使用SCSS嵌套保持结构清晰
   • 定义颜色变量方便主题切换
   • 保持选择器特异性低于2级

2. 响应式适配技巧

   @media (max-width: 768px) {
     .filter-container {
       flex-direction: column;
       
       .operate-bar {
         margin-right: 0;
         margin-bottom: 15px;
       }
     }
   }
   

3. 可维护性提升
   • 定义$search-bg-color: #f5f7fa等变量
   • 使用@mixin封装常用样式组合
   • 保持样式与组件生命周期同步

---

通过本文的代码解析，您已经掌握了企业级搜索功能的完整实现方案。建议结合业务需求进行个性化扩展，例如添加搜索历史记录、智能推荐等功能，进一步提升用户体验！