当前位置：首页 > VUE

vue实现多规格选择

2026-01-22 05:26:59VUE

实现多规格选择的核心思路

在Vue中实现多规格选择通常涉及商品的多属性组合（如颜色、尺寸等），需处理规格联动、库存校验以及用户交互逻辑。以下是具体实现方法：

数据结构设计

规格数据通常采用嵌套结构，包含规格组和规格项：

vue实现多规格选择

data() {
  return {
    specs: [
      {
        name: '颜色',
        items: [
          { id: 1, name: '红色', disabled: false },
          { id: 2, name: '蓝色', disabled: false }
        ]
      },
      {
        name: '尺寸',
        items: [
          { id: 3, name: 'S', disabled: false },
          { id: 4, name: 'M', disabled: false }
        ]
      }
    ],
    selectedSpecs: {}, // 存储用户选择的规格 { 颜色: 1, 尺寸: 3 }
    skus: [
      { specs: { 颜色: 1, 尺寸: 3 }, stock: 10 },
      { specs: { 颜色: 2, 尺寸: 4 }, stock: 5 }
    ]
  }
}

规格联动与禁用逻辑

通过计算属性动态禁用不可选的规格项：

computed: {
  disabledSpecs() {
    const disabledMap = {};
    this.specs.forEach(spec => {
      spec.items.forEach(item => {
        const tempSelected = { ...this.selectedSpecs, [spec.name]: item.id };
        disabledMap[item.id] = !this.isSkuAvailable(tempSelected);
      });
    });
    return disabledMap;
  }
},
methods: {
  isSkuAvailable(tempSelected) {
    return this.skus.some(sku => {
      return Object.keys(tempSelected).every(
        key => sku.specs[key] === tempSelected[key]
      );
    });
  }
}

模板渲染

使用v-for渲染规格组和规格项，绑定点击事件：

vue实现多规格选择

<div v-for="spec in specs" :key="spec.name">
  <h3>{{ spec.name }}</h3>
  <button
    v-for="item in spec.items"
    :key="item.id"
    :disabled="disabledSpecs[item.id]"
    :class="{ active: selectedSpecs[spec.name] === item.id }"
    @click="selectSpec(spec.name, item.id)"
  >
    {{ item.name }}
  </button>
</div>

选择规格处理

更新选择状态并校验完整性：

methods: {
  selectSpec(specName, specId) {
    this.$set(this.selectedSpecs, specName, specId);
    this.checkSelectionComplete();
  },
  checkSelectionComplete() {
    const isComplete = this.specs.every(spec => this.selectedSpecs[spec.name]);
    if (isComplete) {
      const matchedSku = this.skus.find(sku => 
        Object.keys(this.selectedSpecs).every(
          key => sku.specs[key] === this.selectedSpecs[key]
        )
      );
      console.log('当前库存:', matchedSku.stock);
    }
  }
}

动态样式与交互优化

通过CSS增强用户体验：

button {
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
}
button.active {
  border-color: #f00;
  background-color: #ffecec;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}