element表格的表头自带筛选功能如何改成搜索框

要将 element 表格的表头自带筛选功能改成搜索框，可以使用 `el-input` 组件来实现。具体步骤如下：

1. 在表格外部添加一个 `el-input` 组件，作为搜索框。

2. 监听 `el-input` 组件的 `input` 事件，获取用户输入的搜索关键字。

3. 将搜索关键字传递给表格组件的 `filter-method` 属性，作为表格的过滤条件。

以下为示例代码：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索关键字" @input="handleSearch"></el-input>
    <el-table :data="tableData" :columns="tableColumns" :filter-method="filterTableData">
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      tableData: [
        // 表格数据
      ],
      tableColumns: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        // 表格列配置
      ]
    }
  },
  methods: {
    filterTableData(value, row, column) {
      const prop = column.property;
      return row[prop].indexOf(value) > -1;
    },
    handleSearch() {
      this.$nextTick(() => {
        this.$refs.table.clearFilter();
        this.$refs.table.filter(this.keyword, 'name');
      });
    }
  }
}
</script>

在上面的示例代码中，我们添加了一个 `el-input` 组件，用于搜索表格数据。当用户在搜索框中输入关键字后，会触发 `handleSearch` 方法，将搜索关键字传递给表格组件的 `filter-method` 属性。在 `filter-method` 方法中，我们根据搜索关键字和表格数据进行匹配，返回符合条件的数据。

注意：在搜索时，我们只搜索了表格中的 `name` 列。如果想搜索多列数据，可以在 `filter-method` 方法中进行扩展。