vue 实现商品分类

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">
    <div v-for="category in categories" :key="category.id">
      <div @click="toggleChildren(category)">
        {{ category.name }}
      </div>
      <div v-if="category.showChildren && category.children">
        <category :categories="category.children"></category>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  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)
    }
  }
}

样式处理

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

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

交互优化

实现分类选择和商品过滤功能：

<template>
  <div>
    <category 
      :categories="categories" 
      @select="handleSelect"
    ></category>
    <products :category-id="selectedCategoryId"></products>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategoryId: null
    }
  },
  methods: {
    handleSelect(categoryId) {
      this.selectedCategoryId = categoryId
    }
  }
}
</script>

性能优化

对于大量分类数据，可以采用虚拟滚动或懒加载：

<template>
  <virtual-list 
    :size="50"
    :remain="10"
    :data="flattenCategories"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </virtual-list>
</template>

后端集成

实现与后端API的交互：

// api/category.js
export default {
  getCategories() {
    return axios.get('/api/categories')
  },
  addCategory(data) {
    return axios.post('/api/categories', data)
  },
  updateCategory(id, data) {
    return axios.put(`/api/categories/${id}`, data)
  }
}

移动端适配

针对移动设备优化分类显示：

@media (max-width: 768px) {
  .category {
    padding-left: 10px;
    font-size: 14px;
  }
}