elementui表格增加搜索功能
elementUI表格组件默认只能过滤数据，不能搜索。
1.0增加输入框，配合搜索
<el-input v-model="form.searchValue" class="searchinput" placeholder="输入商品名称" prefix-icon="el-icon-search" ><el-button slot="append" class="searchbtn" @click="search">搜索</el-button>
</el-input> search() {this.currentPage = 1;this.tableData = this.tableData.filter((item) => {return item.PluName.includes(this.form.searchValue);});},2.0 封装组件
由于1.0核心改变了表格数据，导致只能搜索一次，接下来封装组件来实现其他页面复用
2.1新建 SearchFilter.vue ，包含输入框和过滤逻辑：
<template><div class="search-filter"><el-inputv-model="searchValue"placeholder="请输入搜索内容"@input="handleSearch"/></div>
</template><script>
export default {name: 'SearchFilter',props: {// 原始数据（必传）originalData: {type: Array,required: true},// 搜索字段（可选，默认 'PluName'）searchKey: {type: String,default: 'PluName'}},data() {return {searchValue: ''}},computed: {// 计算过滤后的数据filteredData() {return this.originalData.filter(item => {const value = item[this.searchKey] || '';return value.toString().includes(this.searchValue);});}},methods: {handleSearch() {// 触发事件，将过滤后的数据传递给父组件this.$emit('update:filtered-data', this.filteredData);}}
}
</script>2.2. 在父组件（如 Kucun.vue ）中使用
<template><div><SearchFilter:original-data="originalData":search-key="'PluName'"v-model:filtered-data="tableData"/><el-table :data="tableData"><!-- 表格列定义 --></el-table></div>
</template><script>
import SearchFilter from '@/components/SearchFilter.vue';
export default {components: { SearchFilter },data() {return {originalData: [], // 原始数据（从接口获取）tableData: [] // 过滤后的数据（由组件传递）}}
}
</script>