Vue中基于多选项生成产品变体列表的JavaScript实现逻辑

需求：从数量不固定的选中选项列表生成产品变体，输入为包含选项名及对应选中值的数组，输出为所有可能的变体组合，每个变体包含拼接的名称和选中值ID数组。
输入示例：

[
  {
   option: "size",
   selected_values: [{id: 1, value: "XL"}, {id: 2, value: "M"}]
  },
  {
   option: "color",
   selected_values: [{id: 14, value: "Red"}, {id: 15, value: "Blue"}]
  }
]

期望输出示例：

[
 {
  variant_name: "XL Red",
  selected_values: [1, 14]
 },
 {
  variant_name: "XL Blue",
  selected_values: [1, 15]
 },
 {
  variant_name: "M Red",
  selected_values: [2, 14]
 },
 {
  variant_name: "M Blue",
  selected_values: [2, 15]
 }
]

核心思路 #

这个需求的本质是求多个集合的笛卡尔积——把每个选项的选中值做全组合，再把每个组合转换成要求的变体格式。我们可以在Vue的计算属性里实现这个逻辑，核心是先实现一个通用的笛卡尔积函数，再对结果做映射处理。

代码实现 #

在Vue组件中，定义计算属性productVariants，内部包含笛卡尔积辅助函数：

<template>
  <!-- 组件内容 -->
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [
        // 绑定表单的选项数据，结构与输入示例一致
        {
          option: "size",
          selected_values: [{id: 1, value: "XL"}, {id: 2, value: "M"}]
        },
        {
          option: "color",
          selected_values: [{id: 14, value: "Red"}, {id: 15, value: "Blue"}]
        }
      ]
    };
  },
  computed: {
    productVariants() {
      // 辅助函数：计算多个数组的笛卡尔积
      const cartesianProduct = (...arrays) => {
        return arrays.reduce((acc, curr) => {
          return acc.flatMap(accItem => {
            return curr.map(currItem => [...accItem, currItem]);
          });
        }, [[]]);
      };

      // 1. 提取每个选项的选中值列表，作为笛卡尔积的输入集合
      const valueSets = this.selectedOptions.map(opt => opt.selected_values);

      // 2. 计算所有选中值的全组合
      const valueCombinations = cartesianProduct(...valueSets);

      // 3. 将每个组合映射成目标变体格式
      return valueCombinations.map(combination => {
        return {
          variant_name: combination.map(item => item.value).join(' '),
          selected_values: combination.map(item => item.id)
        };
      });
    }
  }
};
</script>

代码说明 #

• 笛卡尔积函数：通过reduce和flatMap实现，支持任意数量的输入数组，自动生成所有元素的全组合，适配选项数量不固定的场景。
• 提取选中值集合：把每个选项的selected_values单独提取出来，作为笛卡尔积的输入源。
• 生成变体对象：对每个组合结果，拼接value字段得到变体名称，收集id字段得到选中值ID数组，完全匹配需求格式。

注意事项 #

• 如果某个选项没有选中值，valueSets会出现空数组，此时笛卡尔积结果为空，变体列表也会是空数组，符合“无选中值则无法生成变体”的业务逻辑。
• 新增选项时无需修改计算属性逻辑，代码会自动适配新的选项集合生成全组合。

内容的提问来源于stack exchange，提问作者Ibrahim Abdulbasit