elementui table头加入搜索条件

在Element UI的Table组件中，你可以通过使用el-table-column的render-header属性来为表格头部添加搜索条件。下面是一个简单的例子，展示了如何实现这一功能：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      :render-header="renderHeader"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      :render-header="renderHeader"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable
      :render-header="renderHeader"
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, /* ... more data ... */]
    };
  },
  methods: {
    renderHeader(h, { column }) {
      return h('span', [
        column.label,
        h('el-input', {
          props: {
            size: 'mini'
          },
          on: {
            input: value => {
              // 这里处理搜索条件变更的逻辑
              console.log(`Search for ${value}`);
            }
          },
          nativeOn: {
            keyup: event => {
              // 处理按键事件，例如回车搜索
              if (event.key === 'Enter') {
                // 执行搜索操作
              }
            }
          }
        })
      ]);
    }
  }
};
</script>

在这个例子中，renderHeader方法使用了Vue的h函数来创建一个包含el-table-column的头部内容，其中包括列的标签名称和一个小型输入框。每当输入框的内容变化时，你可以在input事件处理函数中添加你的搜索逻辑。