实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.prototype.$axios = axios;
</script>
</head>
<body>
<div id="app">
<div>
原数据： <p> {{goodsData}}</p>
</div>
<div>
<el-button type="primary" @click="calculation">计算笛卡尔积</el-button>
</div>
<div>
计算结果： <p> {{calculationData}}</p>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
goodsData: [{ name: '尺寸', arr: ["XXL", "XL"] }, { name: '颜色', arr: ["红色", "白色"] }, { name: '型号', arr: ["x系列", "m系列"] }],
calculationData: [],
},
methods: {
descartes: function (dataValues, result, layer, curList) {
if (layer < dataValues.length - 1) {
if (dataValues[layer].arr.length == 0) {
this.descartes(dataValues, result, layer + 1, curList);
} else {
for (let i = 0; i < dataValues[layer].arr.length; i++) {
let list = JSON.parse(JSON.stringify(curList));
console.log(list)
let data = { name: dataValues[layer].name, value: dataValues[layer].arr[i] };
list.push(data);
this.descartes(dataValues, result, layer + 1, list);
}
}
} else if (layer == dataValues.length - 1) {
if (dataValues[layer].arr.length == 0) {
result.push(curList);
} else {
for (let i = 0; i < dataValues[layer].arr.length; i++) {
let list = JSON.parse(JSON.stringify(curList));
let data = { name: dataValues[layer].name, value: dataValues[layer].arr[i] };
list.push(data);
result.push(list);
}
}
}
},
calculation: function () {
//计算 笛卡尔积
let result = []; let curList = []; let layer = 0;
this.descartes(this.goodsData, result, layer, curList);
console.log(result)
this.calculationData = result;
}
},
mounted() {
}
});
</script>
</body>
</html>
计算结果
计算结果
原数据：
[ { "name": "尺寸", "arr": [ "XXL", "XL" ] }, { "name": "颜色", "arr": [ "红色", "白色" ] }, { "name": "型号", "arr": [ "x系列", "m系列" ] } ]
计算结果：
[ [ { "name": "尺寸", "value": "XXL" }, { "name": "颜色", "value": "红色" }, { "name": "型号", "value": "x系列" } ], [ { "name": "尺寸", "value": "XXL" }, { "name": "颜色", "value": "红色" }, { "name": "型号", "value": "m系列" } ], [ { "name": "尺寸", "value": "XXL" }, { "name": "颜色", "value": "白色" }, { "name": "型号", "value": "x系列" } ], [ { "name": "尺寸", "value": "XXL" }, { "name": "颜色", "value": "白色" }, { "name": "型号", "value": "m系列" } ], [ { "name": "尺寸", "value": "XL" }, { "name": "颜色", "value": "红色" }, { "name": "型号", "value": "x系列" } ], [ { "name": "尺寸", "value": "XL" }, { "name": "颜色", "value": "红色" }, { "name": "型号", "value": "m系列" } ], [ { "name": "尺寸", "value": "XL" }, { "name": "颜色", "value": "白色" }, { "name": "型号", "value": "x系列" } ], [ { "name": "尺寸", "value": "XL" }, { "name": "颜色", "value": "白色" }, { "name": "型号", "value": "m系列" } ] ]
本文地址：https://blog.csdn.net/laow1314/article/details/109251567
