vue和element实现搜索
使用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)
}
}添加搜索历史记录：
data() {
return {
searchHistory: []
}
},
methods: {
onSearch(query) {
if (!this.searchHistory.includes(query)) {
this.searchHistory.push(query)
}
// 其他逻辑
}
}通过以上步骤，可以构建一个完整的Vue+Element UI搜索功能，包含基础搜索、结果展示和性能优化。
