wx-qhb/pageA/rule/rule.vue

<template>
	<div class="product-specifications">
		<view class="">{{all}}</view>
	</div>
</template>

<script>
import { nextTick } from 'vue';
	export default {
		data() {
			return {
				arr: [
					['黑色', '白色', '蓝色'],
					['8GB', '16GB', '32GB'],
					['大', '中', '小']
				],
				all: [],
				allArray: [{
					name: '颜色',
					size: ['白色', '红色', '黑色'],
				}, {
					name: '尺寸',
					size: ['X', 'XL', 'XXL']
				}],
				rule:[]
			};
		},
		mounted() {
			let colorArray = ['白色', '红色', '黑色'] //选择的颜色
			let sizeArray = ['X', 'XL', 'XXL'] //选择的尺寸
			//组合数组 格式为：[[],[]]
			this.fun()
		
			
		},
		methods: {
			// fun() {
			// 	var obj = {}
			// 	this.allArray.forEach((item) => {
			// 		item.size.forEach((a) => {
			// 			obj = {[item.name]: a}
			// 			obj[item.name]
			// 			console.log(this.allArray);    
			// 		})
			// 	})
			// },
			
			fun(){
				this.all = this.allArray.map(item => {
				  // 将每个size数组中的元素转换为对象形式
				  const transformedSize = item.size.map(size => ({ [item.name]: size }));
				  // 返回更新后的对象
				  return {
				    size: transformedSize
				  };
				});
				
				this.$nextTick(()=>{
					const rule = this.cartesianProductOf(this.all); //调用笛卡尔积方法
				})
				// console.log(this.all);   
			},


			cartesianProductOf: function() { //笛卡尔积
				return Array.prototype.reduce.call(arguments, function(a, b) {
					var ret = [];
					console.log(a);
					a.forEach(function(a) {
						b.forEach(function(b) {
							ret.push(a.concat([b]));
						});
					});
					return ret;
				}, [
					[]
				]);
			},
		}
	}
</script>

<style scoped>
	.spec-item {
		margin: 10px;
	}

	.combinations-list {
		margin-top: 20px;
	}

	.combination-item {
		margin: 5px 0;
	}
</style>