elementui搜索

ElementUI 搜索功能实现方法

输入框搜索

使用 el-input 组件结合 v-model 实现基础搜索功能，通过监听输入变化触发搜索逻辑。

<el-input v-model="searchText" placeholder="请输入搜索内容" @input="handleSearch" />

methods: {
  handleSearch() {
    this.filteredData = this.originalData.filter(item => 
      item.name.includes(this.searchText)
    )
  }
}

表格内搜索

结合 el-table 的 filter-method 属性实现表格列过滤，需配合 scoped slot 使用。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template #header>
      <el-input v-model="searchName" size="mini" placeholder="搜索姓名"/>
    </template>
  </el-table-column>
</el-table>

远程搜索

使用 el-autocomplete 组件实现异步搜索建议，需配置 fetch-suggestions 方法。

<el-autocomplete
  v-model="searchText"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect"
/>

methods: {
  querySearch(queryString, cb) {
    axios.get('/api/search', { params: { q: queryString } })
      .then(response => cb(response.data))
  }
}

复合搜索条件

结合 el-form 实现多条件组合搜索，适用于复杂查询场景。

<el-form :inline="true" @submit.native.prevent="handleSearch">
  <el-form-item label="名称">
    <el-input v-model="form.name" placeholder="名称"/>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="form.status" placeholder="状态">
      <el-option label="启用" value="1"/>
      <el-option label="禁用" value="0"/>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" native-type="submit">搜索</el-button>
  </el-form-item>
</el-form>

搜索优化技巧

添加防抖处理避免频繁触发搜索请求，提升性能。

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 搜索逻辑
  }, 500)
}

样式自定义

通过修改 CSS 变量或覆盖默认样式实现搜索组件个性化。

.el-input__inner {
  border-radius: 20px;
}
.el-autocomplete-suggestion li {
  padding: 0 20px;
}