基于elementUI二次封装一个表格加上搜索的控件

以下是一个基于Element UI的二次封装示例，用于创建一个带有搜索功能的表格组件。

首先，创建一个新的Vue组件文件SearchTable.vue:

<template>
  <div>
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      style="margin-bottom: 10px;"
      @input="handleSearch"
    />
    <el-table :data="filteredData">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      />
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'SearchTable',
  props: {
    data: Array,
    columns: Array
  },
  data() {
    return {
      searchQuery: '',
      filteredData: this.data
    };
  },
  methods: {
    handleSearch() {
      this.filteredData = this.data.filter(row =>
        this.columns.some(column =>
          String(row[column.prop]).toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      );
    }
  }
};
</script>

然后，你可以在父组件中使用这个封装好的SearchTable组件：

<template>
  <div>
    <search-table :data="tableData" :columns="tableColumns" />
  </div>
</template>
 
<script>
import SearchTable from './SearchTable.vue';
 
export default {
  components: {
    SearchTable
  },
  data() {
    return {
      tableData: [
        // ... 填充你的数据
      ],
      tableColumns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        // ... 其他列
      ]
    };
  }
};
</script>

在这个例子中，SearchTable组件接收两个props：data和columns。data是表格要展示的数据数组，而columns是一个对象数组，定义了表格列的属性和标签。

在SearchTable组件内部，我们使用了el-input来实现搜索框，并监听输入事件来过滤数据。每次输入时，handleSearch方法会被调用，并对原始数据数组进行过滤，以显示包含搜索词的结果。这个方法使用了数组的filter和some方法，以及字符串的includes方法来完成搜索功能。