当前位置：首页 > VUE

vue分类功能实现

2026-02-17 20:52:43VUE

Vue 分类功能实现方法

数据结构设计

分类数据通常采用树形结构或扁平结构。树形结构适合多级分类，扁平结构适合简单分类。

树形结构示例：

categories: [
  {
    id: 1,
    name: '电子产品',
    children: [
      { id: 11, name: '手机' },
      { id: 12, name: '电脑' }
    ]
  }
]

扁平结构示例：

categories: [
  { id: 1, name: '电子产品', parentId: null },
  { id: 11, name: '手机', parentId: 1 },
  { id: 12, name: '电脑', parentId: 1 }
]

分类组件实现

创建可复用的分类组件，支持展示和选择分类。

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

<script>
export default {
  props: ['categories'],
  data() {
    return {
      selectedCategory: null
    }
  },
  watch: {
    selectedCategory(newVal) {
      this.$emit('category-selected', newVal)
    }
  }
}
</script>

多级分类展示

递归组件适合展示多级分类结构。

<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
      <category-tree 
        v-if="category.children && category.children.length" 
        :categories="category.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryTree',
  props: ['categories']
}
</script>

分类筛选功能

实现基于分类筛选商品或内容的功能。

computed: {
  filteredItems() {
    if (!this.selectedCategory) return this.items
    return this.items.filter(item => 
      item.categoryId === this.selectedCategory
    )
  }
}

分类管理功能

提供分类的增删改查操作接口。

methods: {
  addCategory(category) {
    this.categories.push(category)
  },
  deleteCategory(id) {
    this.categories = this.categories.filter(c => c.id !== id)
  }
}

与后端交互

通过API与后端进行数据同步。

async fetchCategories() {
  try {
    const response = await axios.get('/api/categories')
    this.categories = response.data
  } catch (error) {
    console.error('获取分类失败:', error)
  }
}

样式优化

使用CSS美化分类组件，提升用户体验。

.category-list {
  list-style: none;
  padding-left: 20px;
}

.category-item {
  padding: 5px;
  cursor: pointer;
}

.category-item:hover {
  background-color: #f5f5f5;
}