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-input
      v-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>

说明
- props 说明 ：
  - originalData ：父组件传递的原始数据（必传）。
  - searchKey ：指定搜索的字段（可选，默认 PluName ）。
- 事件 ：通过 @update:filtered-data 实时传递过滤后的数据，父组件使用 v-model:filtered-data 接收。
- 扩展性 ：支持自定义搜索字段、输入框样式（可通过插槽修改输入框），或添加“重置”按钮等功能。