当前位置：首页 > VUE

vue和element实现搜索

2026-01-21 12:24:55VUE

Vue 与 Element UI 实现搜索功能

在 Vue 项目中结合 Element UI 实现搜索功能，通常需要以下几个关键步骤：

数据绑定与输入框

使用 Element UI 的 el-input 组件绑定搜索关键词，通过 v-model 实现双向数据绑定：

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

在 Vue 实例中定义 searchKeyword：

data() {
  return {
    searchKeyword: '',
    originalData: [], // 原始数据
    filteredData: [] // 过滤后的数据
  }
}

搜索逻辑实现

通过计算属性或方法对原始数据进行过滤。以下是计算属性方式：

computed: {
  filteredData() {
    return this.originalData.filter(item => 
      item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
    );
  }
}

或使用方法触发搜索：

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

结合表格展示

若需在表格中展示搜索结果，使用 el-table 绑定过滤后的数据：

<el-table :data="filteredData">
  <el-table-column prop="name" label="名称"></el-table-column>
  <!-- 其他列 -->
</el-table>

实时搜索优化

添加防抖（debounce）避免频繁触发搜索：

import { debounce } from 'lodash';

methods: {
  handleSearch: debounce(function() {
    this.filteredData = this.originalData.filter(item =>
      item.name.includes(this.searchKeyword)
    );
  }, 300)
}

多条件搜索

对于多条件搜索，可扩展搜索逻辑：

filteredData() {
  return this.originalData.filter(item => {
    const keyword = this.searchKeyword.toLowerCase();
    return (
      item.name.toLowerCase().includes(keyword) ||
      item.description.toLowerCase().includes(keyword)
    );
  });
}

清空搜索

添加清空按钮重置搜索：

vue和element实现搜索

<el-input v-model="searchKeyword" placeholder="请输入搜索内容">
  <el-button slot="append" icon="el-icon-close" @click="searchKeyword = ''"></el-button>
</el-input>

完整示例

<template>
  <div>
    <el-input v-model="searchKeyword" placeholder="搜索" @input="handleSearch"></el-input>
    <el-table :data="filteredData">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      originalData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ]
    };
  },
  computed: {
    filteredData() {
      return this.originalData.filter(item =>
        item.name.includes(this.searchKeyword)
      );
    }
  }
};
</script>

通过以上方式，可以快速在 Vue 项目中结合 Element UI 实现高效的搜索功能。