VUE实现表头过滤

VUE实现表头过滤的方法

在VUE中实现表头过滤通常需要结合表格组件（如Element UI的el-table或Ant Design的a-table）和自定义过滤逻辑。以下是几种常见的实现方式：

使用Element UI的el-table-column内置过滤功能

Element UI的el-table组件提供了内置的过滤功能，可以直接在表头中配置：

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
    :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
    :filter-method="filterHandler">
  </el-table-column>
</el-table>

methods: {
  filterHandler(value, row, column) {
    return row.name === value
  }
}

自定义表头过滤组件

对于更复杂的过滤需求，可以创建自定义过滤组件：

<el-table :data="filteredData">
  <el-table-column label="日期">
    <template #header="scope">
      <div>
        <span>日期</span>
        <el-date-picker
          v-model="dateFilter"
          type="daterange"
          @change="handleDateFilter">
        </el-date-picker>
      </div>
    </template>
  </el-table-column>
</el-table>

data() {
  return {
    tableData: [],
    dateFilter: null,
    filteredData: []
  }
},
methods: {
  handleDateFilter() {
    if (!this.dateFilter) {
      this.filteredData = this.tableData
      return
    }
    const [start, end] = this.dateFilter
    this.filteredData = this.tableData.filter(item => {
      const date = new Date(item.date)
      return date >= start && date <= end
    })
  }
}

使用计算属性实现多列过滤

通过计算属性可以实现多列组合过滤：

computed: {
  filteredData() {
    return this.tableData.filter(item => {
      return (
        (!this.nameFilter || item.name.includes(this.nameFilter)) &&
        (!this.ageFilter || item.age === this.ageFilter) &&
        (!this.dateFilter || (
          new Date(item.date) >= this.dateFilter[0] &&
          new Date(item.date) <= this.dateFilter[1]
        ))
      )
    })
  }
}

使用第三方库实现高级过滤

对于更高级的过滤需求，可以考虑使用专门的表格库如ag-Grid或VxeTable：

// 使用ag-Grid示例
const gridOptions = {
  columnDefs: [
    {
      field: 'age',
      filter: 'agNumberColumnFilter',
      filterParams: {
        filterOptions: ['equals', 'lessThan', 'greaterThan']
      }
    }
  ],
  defaultColDef: {
    filter: true
  }
}

实现服务端过滤

当数据量很大时，可以考虑服务端过滤：

methods: {
  async fetchFilteredData(filterParams) {
    const res = await axios.get('/api/data', { params: filterParams })
    this.tableData = res.data
  }
}

以上方法可以根据具体需求选择使用，Element UI的内置过滤适合简单场景，自定义组件提供更大灵活性，服务端过滤则适合大数据量情况。