当前位置：首页 > VUE

VUE实现表头过滤

2026-02-18 11:05:29VUE

VUE实现表头过滤的方法

在VUE中实现表头过滤功能，可以通过以下方法完成。这里以Element UI的表格组件为例，展示如何为表头添加过滤功能。

使用Element UI的Table组件

Element UI的表格组件内置了表头过滤功能，可以直接使用其提供的filter-method和filters属性实现。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
      :filter-method="filterHandler">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '张三'
      }, {
        date: '2016-05-04',
        name: '李四'
      }]
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  }
}
</script>

自定义表头过滤

如果需要更灵活的过滤方式，可以自定义表头，结合v-if或计算属性实现过滤功能。

<template>
  <div>
    <input v-model="filterText" placeholder="输入过滤文本">
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.date">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      tableData: [
        { date: '2016-05-02', name: '张三' },
        { date: '2016-05-04', name: '李四' }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => 
        item.name.includes(this.filterText)
      )
    }
  }
}
</script>

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

对于更复杂的需求，可以考虑使用第三方库如vue-tables-2或vxe-table，它们提供了更强大的表格过滤功能。

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column field="date" title="日期"></vxe-column>
      <vxe-column field="name" title="姓名" :filters="nameFilters"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { VxeTable, VxeColumn } from 'vxe-table'
export default {
  components: { VxeTable, VxeColumn },
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三' },
        { date: '2016-05-04', name: '李四' }
      ],
      nameFilters: [
        { label: '张三', value: '张三' },
        { label: '李四', value: '李四' }
      ]
    }
  }
}
</script>

以上方法涵盖了从简单到复杂的表头过滤实现方式，可以根据项目需求选择合适的方法。

VUE实现表头过滤