当前位置：首页 > VUE

用VUE实现表格分类

2026-02-22 07:53:13VUE

使用Vue实现表格分类

在Vue中实现表格分类通常涉及以下几个关键步骤：数据绑定、分类逻辑处理、动态渲染表格内容。以下是一个完整的实现方案。

数据准备

定义一个包含分类字段和表格数据的数组。例如：

data() {
  return {
    categories: ['Category A', 'Category B', 'Category C'],
    tableData: [
      { id: 1, name: 'Item 1', category: 'Category A' },
      { id: 2, name: 'Item 2', category: 'Category B' },
      { id: 3, name: 'Item 3', category: 'Category A' },
      { id: 4, name: 'Item 4', category: 'Category C' }
    ],
    selectedCategory: ''
  }
}

分类筛选逻辑

使用计算属性根据选择的分类筛选数据：

computed: {
  filteredData() {
    if (!this.selectedCategory) return this.tableData;
    return this.tableData.filter(item => item.category === this.selectedCategory);
  }
}

模板渲染

在模板中添加分类选择器和表格渲染：

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">All Categories</option>
      <option v-for="category in categories" :value="category" :key="category">
        {{ category }}
      </option>
    </select>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

进阶实现：多级分类

对于更复杂的多级分类需求，可以嵌套使用计算属性和组件。

多级数据结构

data() {
  return {
    categories: [
      {
        name: 'Category A',
        subCategories: ['Sub A1', 'Sub A2']
      },
      {
        name: 'Category B',
        subCategories: ['Sub B1', 'Sub B2']
      }
    ],
    tableData: [
      { id: 1, name: 'Item 1', category: 'Category A', subCategory: 'Sub A1' },
      { id: 2, name: 'Item 2', category: 'Category B', subCategory: 'Sub B2' }
    ],
    selectedCategory: '',
    selectedSubCategory: ''
  }
}

多级筛选逻辑

computed: {
  filteredData() {
    let result = this.tableData;
    if (this.selectedCategory) {
      result = result.filter(item => item.category === this.selectedCategory);
    }
    if (this.selectedSubCategory) {
      result = result.filter(item => item.subCategory === this.selectedSubCategory);
    }
    return result;
  },
  availableSubCategories() {
    if (!this.selectedCategory) return [];
    const category = this.categories.find(c => c.name === this.selectedCategory);
    return category ? category.subCategories : [];
  }
}

多级选择器模板

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">All Categories</option>
      <option v-for="category in categories" :value="category.name" :key="category.name">
        {{ category.name }}
      </option>
    </select>

    <select v-model="selectedSubCategory" :disabled="!selectedCategory">
      <option value="">All Subcategories</option>
      <option v-for="subCat in availableSubCategories" :value="subCat" :key="subCat">
        {{ subCat }}
      </option>
    </select>

    <!-- 表格渲染部分与之前相同 -->
  </div>
</template>