当前位置：首页 > VUE

vue实现商品分类

2026-01-18 16:41:35VUE

Vue 实现商品分类的方法

数据准备

商品分类数据通常以树形结构组织，包含父分类和子分类。数据格式可以设计为：

categories: [
  {
    id: 1,
    name: "电子产品",
    children: [
      { id: 11, name: "手机" },
      { id: 12, name: "电脑" }
    ]
  },
  {
    id: 2,
    name: "服装",
    children: [
      { id: 21, name: "男装" },
      { id: 22, name: "女装" }
    ]
  }
]

组件结构

创建分类展示组件，使用递归组件处理多级分类：

<template>
  <div class="category-list">
    <div v-for="category in categories" :key="category.id">
      <div @click="toggleChildren(category)">
        {{ category.name }}
        <span v-if="category.children">+</span>
      </div>
      <div v-if="category.showChildren && category.children">
        <category-list :categories="category.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CategoryList',
  props: ['categories'],
  methods: {
    toggleChildren(category) {
      this.$set(category, 'showChildren', !category.showChildren)
    }
  }
}
</script>

状态管理

对于大型应用，建议使用Vuex管理分类状态：

// store/modules/categories.js
export default {
  state: {
    categories: []
  },
  mutations: {
    SET_CATEGORIES(state, categories) {
      state.categories = categories
    }
  },
  actions: {
    async fetchCategories({ commit }) {
      const res = await api.getCategories()
      commit('SET_CATEGORIES', res.data)
    }
  }
}

分类筛选

实现商品按分类筛选功能：

computed: {
  filteredProducts() {
    if (!this.selectedCategory) return this.products
    return this.products.filter(
      product => product.categoryId === this.selectedCategory
    )
  }
}

样式优化

添加CSS样式增强用户体验：

.category-list {
  padding-left: 20px;
}
.category-item {
  cursor: pointer;
  padding: 5px;
}
.category-item:hover {
  background-color: #f5f5f5;
}

交互增强

添加动画效果提升用户体验：

<transition name="fade">
  <div v-if="category.showChildren && category.children">
    <category-list :categories="category.children" />
  </div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

API集成

从后端API获取分类数据：

methods: {
  async loadCategories() {
    try {
      const response = await axios.get('/api/categories')
      this.categories = response.data
    } catch (error) {
      console.error('加载分类失败:', error)
    }
  }
},
created() {
  this.loadCategories()
}

以上方法提供了完整的商品分类实现方案，可根据实际需求进行调整和扩展。

vue实现商品分类