使用vuejs,展示产品sku信息

设计稿:

数据格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var specification = [
{
name: '颜色',
value: [ '黑色', '红色' ]
},
{
name: '尺码',
value: [ 'S', 'M', 'L' ]
},
{
name: '款式',
value: [ '短款', '长款' ]
}
]

分析

如上数据格式,一共有三类规格,每一类规格下都有若干属性,我们最终要展示出三种规格属性的所有不重复搭配;

假设现在我们只有“颜色”这一类规格,那么所有的属性搭配如下:

  1. 黑色
  2. 红色

假设现在我们有”颜色“和”尺码“两类规格,那么所有的属性搭配如下:

  1. 黑色 S
  2. 黑色 M
  3. 黑色 L
  4. 红色 S
  5. 红色 M
  6. 红色 L

以此类推,将不同规格下的属性数量相乘,就是所有不重复搭配属性的总数量。由此可得出,上面的数据格式中,一共会有2*3*2=12 中属性搭配。

实操

绘制表格框架

接下类,我们用html绘制一个表格框架,用来展示所有不重复的规格属性:

HTML部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table class="stock-table">
<thead>
<tr>
<th v-for="item in specification">{{item.name}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(attr, index) in countSum" :key="index">
<td
v-for="(item, specIndex) in specification">
属性占位符
</td>
</tr>
</tbody>
</table>
解释
  1. 首先,在thead部分遍历出所有的规格名称

  2. 然后,tbody中的tr需要遍历2*3*2=12次,这里我们写了一个方法,用来计算不同规格下所有属性的乘积

    1
    2
    3
    4
    5
    6
    7
    8
    9
    countSum () {
    let num = 1
    this.specification.forEach((item, index) => {
    if (item.value.length) {
    num *= item.value.length
    }
    })
    return num
    }
  3. 在tbody的每一行tr中,要显示与规格名称对应的所有属性。如何获取这些属性名,我们稍后再讲,这里先放入一些占位文字。

页面展示效果如下:

显示正确的属性名

在实现最终的设计效果之前,我们可以先实现如下的展示效果:

寻找规律
  1. ”颜色“的展示规律为:value[0]*6, value[1]*6
  2. ”尺码“的展示规律为:value[0]*2, value[1]*2, value[2]*2...
  3. ”款式“的展示规律为:value[0], value[1]...

根据上面的规律,我们发现每一类规格属性的重复次数,为后面所有属性数量的乘积(最后一类除外),因此我们需要修改一下countSum方法,输入规格所在的位置,来获取后面所有属性的乘积

1
2
3
4
5
6
7
8
9
countSum (specIndex) {
let num = 1
this.specification.forEach((item, index) => {
if (index >= specIndex && item.value.length) {
num *= item.value.length
}
})
return num
}

接下来,我们把属性占位符替换为一个方法,并传入规格序号和每一行tr的序号

1
2
3
4
5
6
<tr v-for="(attr, index) in countSum" :key="index">
<td
v-for="(item, specIndex) in specification">
{{getSpecAttr(specIndex, index)}}
</td>
</tr>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getSpecAttr (specIndex, index) {
// 获取当前规格项目下的属性值
const currentValues = this.specification[specIndex].value
let indexCopy

// 判断是否是最后一个规格项目
if (this.specification[specIndex + 1] && this.specification[specIndex + 1].value.length) {
indexCopy = index / this.countSum(specIndex + 1)
} else {
indexCopy = index
}

const i = Math.floor(indexCopy % currentValues.length)

if (i.toString() !== 'NaN') {
return currentValues[i]
} else {
return ''
}
}
解释
  1. currentValues为当前规格的所有属性数组,假如当前规格是”颜色“,那么currentValues就是[ '黑色', '红色' ],我们要做的就是先输出6遍currentValues[0],再输出6遍currentValues[1];
  2. specIndex为0时,getSpecAttr方法一共会被遍历12遍,index的值分别为0-11。已知