elementui表格增加搜索功能

发布于:2025-07-06 ⋅ 阅读:(16) ⋅ 点赞:(0)

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 接收。
- 扩展性 :支持自定义搜索字段、输入框样式(可通过插槽修改输入框),或添加“重置”按钮等功能。