当前位置：首页 > VUE

vue实现商品规格分类

2026-01-23 00:50:16VUE

Vue 实现商品规格分类的方法

数据结构设计

商品规格通常采用树形结构或嵌套对象表示。例如，颜色、尺寸等作为一级规格，具体选项作为子规格。数据结构示例如下：

specs: [
  {
    name: '颜色',
    values: ['红色', '蓝色', '黑色']
  },
  {
    name: '尺寸',
    values: ['S', 'M', 'L']
  }
]

动态渲染规格选项

使用 v-for 循环渲染规格分类和选项，结合 Vue 的响应式特性动态更新选中状态。示例代码：

<div v-for="spec in specs" :key="spec.name">
  <h4>{{ spec.name }}</h4>
  <button 
    v-for="value in spec.values" 
    :key="value"
    @click="selectSpec(spec.name, value)"
    :class="{ active: isSelected(spec.name, value) }"
  >
    {{ value }}
  </button>
</div>

选中状态管理

通过 Vue 的 data 或 computed 属性管理选中状态，使用对象存储当前选中的规格：

data() {
  return {
    selectedSpecs: {}
  }
},
methods: {
  selectSpec(name, value) {
    this.$set(this.selectedSpecs, name, value)
  },
  isSelected(name, value) {
    return this.selectedSpecs[name] === value
  }
}

规格组合计算

使用 computed 属性计算有效的规格组合，避免无效选项。例如根据库存过滤不可选规格：

computed: {
  availableSpecs() {
    return this.specs.map(spec => {
      return {
        ...spec,
        values: spec.values.filter(value => this.checkStock(spec.name, value))
      }
    })
  }
}

与后端交互

通过 API 获取规格数据时，通常在 created 或 mounted 钩子中请求数据：

async created() {
  const response = await axios.get('/api/product/specs')
  this.specs = response.data
}

完整组件示例

整合上述功能的完整组件示例：

<template>
  <div class="spec-container">
    <div v-for="spec in availableSpecs" :key="spec.name">
      <h4>{{ spec.name }}</h4>
      <div class="spec-options">
        <button
          v-for="value in spec.values"
          :key="value"
          @click="selectSpec(spec.name, value)"
          :class="{ active: isSelected(spec.name, value) }"
          :disabled="!isAvailable(spec.name, value)"
        >
          {{ value }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specs: [],
      selectedSpecs: {}
    }
  },
  computed: {
    availableSpecs() {
      return this.specs.filter(spec => spec.values.length > 0)
    }
  },
  methods: {
    selectSpec(name, value) {
      this.$set(this.selectedSpecs, name, value)
      this.$emit('spec-change', this.selectedSpecs)
    },
    isSelected(name, value) {
      return this.selectedSpecs[name] === value
    },
    isAvailable(name, value) {
      // 检查库存等业务逻辑
      return true
    }
  },
  async created() {
    const res = await fetch('/api/specs')
    this.specs = await res.json()
  }
}
</script>

<style>
.spec-options button {
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
}
.spec-options button.active {
  border-color: #f00;
}
.spec-options button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

vue实现商品规格分类