当前位置：首页 > VUE

vue和element实现搜索

2026-02-22 03:50:18VUE

使用Vue和Element UI实现搜索功能

安装Element UI

确保项目中已安装Element UI。若未安装，可通过以下命令添加：

npm install element-ui

在main.js中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

创建搜索组件

在Vue组件中，使用el-input和el-button构建搜索框和按钮：

<template>
  <div class="search-container">
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      clearable
      @keyup.enter.native="handleSearch"
    />
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </div>
</template>

数据绑定与方法

在<script>中定义数据和方法：

export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.$emit('search', this.searchQuery)
      } else {
        this.$message.warning('请输入有效内容')
      }
    }
  }
}

样式调整

添加CSS美化搜索区域：

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

搜索结果展示

在父组件中监听搜索事件并处理数据：

<template>
  <div>
    <search-bar @search="onSearch" />
    <el-table :data="filteredData">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'

export default {
  components: { SearchBar },
  data() {
    return {
      originalData: [], // 原始数据
      filteredData: []  // 过滤后数据
    }
  },
  methods: {
    onSearch(query) {
      this.filteredData = this.originalData.filter(item => 
        item.name.includes(query) // 根据实际字段调整
      )
    }
  },
  created() {
    // 初始化时获取数据
    fetchData().then(res => {
      this.originalData = res
      this.filteredData = res
    })
  }
}
</script>

高级功能扩展

实现防抖优化性能：

import _ from 'lodash'

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

添加搜索历史记录：

vue和element实现搜索

data() {
  return {
    searchHistory: []
  }
},
methods: {
  onSearch(query) {
    if (!this.searchHistory.includes(query)) {
      this.searchHistory.push(query)
    }
    // 其他逻辑
  }
}

通过以上步骤，可以构建一个完整的Vue+Element UI搜索功能，包含基础搜索、结果展示和性能优化。