element-plus的el-table自定义表头筛选查询

在Element Plus中，可以通过自定义表头来实现筛选查询功能。以下是一个简单的例子，展示了如何在Element Plus的el-table中添加自定义筛选条件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      column-key="date"
    >
      <template #header="scope">
        <el-input
          v-model="filters['date']"
          placeholder="输入日期筛选"
          @input="handleFilter"
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
      column-key="name"
    >
      <template #header="scope">
        <el-input
          v-model="filters['name']"
          placeholder="输入姓名筛选"
          @input="handleFilter"
        />
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      // 数据列表
    ]);
    const filters = ref({
      date: '',
      name: ''
    });
 
    const handleFilter = () => {
      // 实现筛选逻辑
      // 例如：tableData.value = tableData.value.filter(item => {
      //   return item.date.includes(filters.value.date) && item.name.includes(filters.value.name);
      // });
    };
 
    return {
      tableData,
      filters,
      handleFilter
    };
  }
};
</script>

在这个例子中，我们定义了一个filters reactive对象来跟踪每列的筛选条件。在自定义表头模板中，我们添加了el-input来接收用户输入，并通过@input事件触发handleFilter函数，该函数将根据输入的条件对数据进行筛选。

请注意，实际的筛选逻辑需要根据你的数据结构和需求进行定制。在handleFilter函数中，你可以实现具体的筛选算法来更新tableData。