vue3使用笛卡尔积算法生成sku表格

在Vue 3中，可以使用笛卡尔积算法生成SKU表格。以下是一个简单的示例，展示如何使用Vue 3和Composition API来实现这一功能：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="attr in attributes" :key="attr">{{ attr.name }}</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="combination in combinations" :key="combination.id">
          <td v-for="value in combination" :key="value">{{ value }}</td>
          <td>{{ getPrice(combination) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
import { reactive, computed } from 'vue';
 
export default {
  setup() {
    const attributes = reactive([
      {
        name: 'Color',
        values: ['Red', 'Green', 'Blue']
      },
      {
        name: 'Size',
        values: ['Small', 'Medium', 'Large']
      }
    ]);
 
    const combinations = computed(() => {
      return attributes.reduce((result, attribute) => {
        if (result.length === 0) {
          return attribute.values.map(value => [value]);
        } else {
          const newResult = [];
          result.forEach(combination => {
            attribute.values.forEach(value => {
              newResult.push([...combination, value]);
            });
          });
          return newResult;
        }
      }, []);
    });
 
    const getPrice = (combination) => {
      // 根据combination的值返回对应的价格
      // 示例中仅返回一个固定值，实际应用中需要根据combination查找对应的价格
      return '$100';
    };
 
    return { attributes, combinations, getPrice };
  }
};
</script>

在这个例子中，我们定义了attributes数组来表示不同的属性和它们的可能值。然后，我们使用计算属性combinations来生成属性的所有可能组合。最后，我们遍历combinations来为每个组合创建一行，并显示对应的属性值和价格。getPrice函数是一个示例函数，用于根据组合获取价格，实际应用中需要根据业务逻辑来实现。