当前位置：首页 > VUE

用VUE实现表格分类

2026-01-21 16:35:28VUE

VUE实现表格分类的方法

数据准备与结构设计

在VUE中实现表格分类需要先设计合理的数据结构。通常使用数组存储表格数据，每个对象代表一行数据，包含分类标识字段。例如：

data() {
  return {
    tableData: [
      { id: 1, name: '项目A', category: '类别1' },
      { id: 2, name: '项目B', category: '类别2' },
      { id: 3, name: '项目C', category: '类别1' }
    ],
    currentCategory: '所有类别'
  }
}

计算属性过滤数据

利用VUE的计算属性实现动态分类过滤，避免直接修改原始数据。通过filter方法返回符合当前分类条件的数据：

computed: {
  filteredData() {
    if (this.currentCategory === '所有类别') {
      return this.tableData
    }
    return this.tableData.filter(item => item.category === this.currentCategory)
  }
}

分类切换控制

在模板中添加分类切换控件，通常使用<select>或按钮组。通过v-model绑定当前分类值，触发计算属性更新：

<select v-model="currentCategory">
  <option value="所有类别">所有类别</option>
  <option v-for="cat in uniqueCategories" :value="cat">{{ cat }}</option>
</select>

动态获取分类列表

通过计算属性提取数据中的唯一分类值，用于渲染分类选择器：

computed: {
  uniqueCategories() {
    return [...new Set(this.tableData.map(item => item.category))]
  }
}

表格渲染优化

使用v-for渲染过滤后的数据，建议为每行添加:key提升性能。可结合Element UI等库实现高级表格功能：

<table>
  <tr v-for="item in filteredData" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.category }}</td>
  </tr>
</table>

服务端分类方案

对于大数据量场景，建议将分类逻辑放在服务端。通过API参数获取分类数据：

methods: {
  async fetchData(category) {
    const res = await axios.get('/api/data', { params: { category } })
    this.filteredData = res.data
  }
}

分类状态持久化

使用vuex或localStorage保存分类状态，确保页面刷新后保持当前分类：

watch: {
  currentCategory(newVal) {
    localStorage.setItem('lastCategory', newVal)
  }
},
created() {
  this.currentCategory = localStorage.getItem('lastCategory') || '所有类别'
}

用VUE实现表格分类