代码拉取完成,页面将自动刷新
注意:本项目只提供 DEMO 提供参考,并未打包成 npm package
Flatten、isSame 直接引用了 zent sku 官方文档
SKU.flatten(sku, items, options)
通过计算笛卡尔积,将树形的 value 变成扁平的数组
参数 | 说明 | 类型 | 默认值 | 备选值 |
---|---|---|---|---|
sku | 当前选中规格的 value | array | [] |
|
items | 当前已存在的数据 | array | [] |
|
options | 可配置参数 | object | {} |
optionValue: 'id', optionText: 'value' |
import { flatten } from "src/utils/sku";
let skus = [
{
id: 1,
value: "颜色",
leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
},
{
id: 2,
value: "尺寸",
leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
}
];
console.log(flatten(skus));
/**
* output:
* [
* {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
* {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
* {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
* {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
* ]
*/
// 为某个 SKU 添加额外字段,例如标价、成本、工厂指导价等
let items = [
{
price: "10.00",
code: "AE86",
skus: [
{ k_id: 1, k: "颜色", v_id: 11, v: "红色" },
{ k_id: 2, k: "尺寸", v_id: 22, v: "小" }
]
}
];
console.log(flatten(skus, items));
/**
* output:
* [
* {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
* {
* "price":"10.00",
* "code":"AE86",
* "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
* },
* {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
* {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
* ]
*/
import { isSame } from "src/utils/sku";
let skuA = [
{
id: 1,
value: "颜色",
leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
},
{
id: 2,
value: "尺寸",
leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
}
];
let skuB = [
{
id: 1,
value: "颜色",
leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
},
{
id: 2,
value: "尺寸",
leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
}
];
let skuC = [
{
id: 1,
value: "颜色",
leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
},
{
id: 2,
value: "尺寸",
leaf: [{ id: 22, value: "小" }, { id: 21, value: "大" }]
}
];
let skuD = [
{
id: 1,
value: "颜色",
leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
},
{
id: 3,
value: "尺寸",
leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
}
];
console.log(isSame(skuA, skuB));
console.log(isSame(skuA, skuC));
console.log(isSame(skuA, skuD));
/**
* output:
*
* true
* false
* false
*/
getLevels flatten isEqual
,依次复制三个函数到 ES6 转 ES5 网站(相当于 python3 转 python2)export
语句要删除。即 export function
=> function
git clone https://github.com/zaxlct/vue-sku
npm install
npm run serve
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。