当前位置：首页 > VUE

vue实现表格列筛选

2026-02-23 20:10:23VUE

实现表格列筛选的方法

在Vue中实现表格列筛选功能，可以通过多种方式完成。以下是几种常见的实现方法：

使用Element UI的Table组件

Element UI提供了强大的表格组件，支持列筛选功能。可以通过配置column的filters属性来实现筛选。

<template>
  <el-table :data="tableData">
    <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: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ]
    }
  },
  methods: {
    filterHandler(value, row, column) {
      return row.name === value
    }
  }
}
</script>

自定义筛选组件

vue实现表格列筛选

如果需要更灵活的筛选功能，可以自定义筛选组件。通过v-if或v-show控制列的显示与隐藏。

<template>
  <div>
    <div>
      <label v-for="column in columns" :key="column.prop">
        <input type="checkbox" v-model="column.visible" /> {{ column.label }}
      </label>
    </div>
    <table>
      <thead>
        <tr>
          <th v-for="column in visibleColumns" :key="column.prop">{{ column.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData" :key="row.id">
          <td v-for="column in visibleColumns" :key="column.prop">{{ row[column.prop] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名', visible: true },
        { prop: 'age', label: '年龄', visible: true }
      ],
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 }
      ]
    }
  },
  computed: {
    visibleColumns() {
      return this.columns.filter(column => column.visible)
    }
  }
}
</script>

使用Vuex管理筛选状态

vue实现表格列筛选

对于大型应用，可以使用Vuex管理表格列的筛选状态，确保状态的一致性和可维护性。

// store.js
export default new Vuex.Store({
  state: {
    tableColumns: [
      { prop: 'name', label: '姓名', visible: true },
      { prop: 'age', label: '年龄', visible: true }
    ]
  },
  mutations: {
    toggleColumnVisibility(state, prop) {
      const column = state.tableColumns.find(col => col.prop === prop)
      if (column) {
        column.visible = !column.visible
      }
    }
  }
})

<template>
  <div>
    <div>
      <label v-for="column in columns" :key="column.prop">
        <input
          type="checkbox"
          :checked="column.visible"
          @change="toggleColumn(column.prop)"
        /> {{ column.label }}
      </label>
    </div>
    <table>
      <thead>
        <tr>
          <th v-for="column in visibleColumns" :key="column.prop">{{ column.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData" :key="row.id">
          <td v-for="column in visibleColumns" :key="column.prop">{{ row[column.prop] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['tableColumns']),
    visibleColumns() {
      return this.tableColumns.filter(column => column.visible)
    }
  },
  methods: {
    ...mapMutations(['toggleColumnVisibility']),
    toggleColumn(prop) {
      this.toggleColumnVisibility(prop)
    }
  }
}
</script>

使用第三方库

如果需要更高级的表格功能，可以考虑使用第三方库如ag-grid-vue或vxe-table，这些库提供了丰富的表格功能，包括列筛选。

<template>
  <ag-grid-vue
    style="width: 500px; height: 300px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef">
  </ag-grid-vue>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        { field: 'name', filter: true },
        { field: 'age', filter: true }
      ],
      rowData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ],
      defaultColDef: {
        flex: 1,
        sortable: true,
        filter: true
      }
    }
  }
}
</script>