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

如果你想将element表格的表头筛选功能改成搜索框，可以通过以下步骤实现：

1. 在表格头部添加一个搜索框组件，可以使用element-ui中的el-input组件。
2. 在搜索框组件中绑定一个输入事件，当用户输入关键字时，触发搜索事件。
3. 在搜索事件中，获取用户输入的关键字，并根据关键字过滤表格数据。
4. 将过滤后的数据重新渲染到表格中。

具体实现可以参考以下代码示例：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入关键字" @input="handleSearch"></el-input>
    <el-table :data="filteredData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '', // 用户输入的关键字
      tableData: [ // 原始数据
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  },
  computed: {
    // 根据关键字过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return item.name.indexOf(this.keyword) !== -1 ||
               item.age.toString().indexOf(this.keyword) !== -1 ||
               item.gender.indexOf(this.keyword) !== -1
      })
    }
  },
  methods: {
    // 处理搜索事件
    handleSearch() {
      // 重新渲染表格数据
      this.$nextTick(() => {
        this.$refs.table.setCurrentRow(null)
      })
    }
  }
}
</script>

在上面的代码中，我们首先添加了一个el-input组件，用于接收用户的输入。然后我们在computed中定义了一个filteredData计算属性，根据用户输入的关键字过滤原始数据，返回过滤后的数据。最后，在handleSearch方法中重新渲染表格数据。