产品属性组合合并成表格显示（笛卡尔积)

vue 产品属性组合合并成表格显示（笛卡尔积）

需求
- 效果图

需求

今天经理要我完成一个属性的组合。并且在表格里面显示出来。如：选中规格一中的 A属性，B属性，规格二中的 C属性，D属性。规格三中的 E属性，F属性。那么组合成 A-C-E ,A-C-F ,A-D-E , A-D-F…的笛卡尔积组合下去。但是如果相同的属性要用同一表格。

工具： element +vue

大部分代码来源：来自这位大佬的博客：https://blog.csdn.net/qq_42129422/article/details/88360784
但是他的有些不足之处就是当只有一个属性时候会出现一个问题。

原因： vue会把一个数二维数组里面如果只有一个数组的话就会把二维数组转换为一维数组。从而导致这样出现。

解决：加上一个判断即可。当数二维数组里面只有一条数组时候就获取一维数组里面值。如果有那个大佬知道还有别的办法解决请告知或者知道把二维数组里面只有一条数组时候不转换为一维数组的也告知我。谢谢

// An highlighted block//转换数据getList() {this.tableData7 = [];this.newList = this.descartes(this.newData);if(this.shopType.length>1){   //在这进行判断是否为只有一条数组。for(let index = 0; index < this.newList.length; index++) {this.tableData7.push({color: this.newList[index][0],cailiao: this.newList[index][1],chima: this.newList[index][2],kucun: "",moany: ""});}}else{for(let index = 0; index < this.newList.length; index++) {this.tableData7.push({color: this.newList[index],kucun: "",moany: ""});}}this.getSpanArr(this.tableData7);console.log(this.tableData7);},//计算位置的方法getSpanArr(data) {this.spanArr = [];this.pos = "";this.spanArr1 = [];this.pos1 = "";for(var i = 0; i < data.length; i++) {if(i === 0) {this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if(data[i].color === data[i - 1].color) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}for(var i = 0; i < data.length; i++) {if(i === 0) {this.spanArr1.push(1);this.pos1 = 0;} else {//如果笛卡尔积一直递增下去的话 这是一个很蠢的方法 由于我的要求层数是已知的 这里偷懒了 不然应该用for循环if(data[i].cailiao === data[i - 1].cailiao) {this.spanArr1[this.pos1] += 1;this.spanArr1.push(0);} else {this.spanArr1.push(1);this.pos1 = i;}}}},
//其次还得要在合并行数哪里加一个判断。当只有一个属性时候那就第二个框不要合并。// 合并行数objectSpanMethod1({row,column,rowIndex,columnIndex}) {//我自己加上的if判断  this.shopType是一个数据源。if(this.shopType.length== 1) {if(columnIndex === 0) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};// columnIndex === 1 找到第二列，合并他的列数}} else {// columnIndex === 0 找到第一列，实现合并随机出现的行数if(columnIndex === 0) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};// columnIndex === 1 找到第二列，合并他的列数} else if(columnIndex === 1) {const _row = this.spanArr1[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}}}

最后是我根据自己需求完成了最后的效果图。

效果图

或者选中两个属性的：

或者一个属性的：

产品属性组合合并成表格显示（笛卡尔积)相关推荐

多个vue项目合并成一个_集美们，快看如何一步将多个PDF合并成一个PDF
之前的推文有提到,如何将多幅图片从word中提取出来.今天我们就一起来康康如何快速将多个PDF合并成一个PDF吧! 首先,我们需要一个PDF阅读器,这个阅读器可以是Foxit PDF Editor,也 ...
怎么让两个java文件关联,怎么把多个excel文件合并成一个【几个excle合并成一个】...
怎么把多个excel文件合并成一个新建一个BOOK文件,按Alt F11这二个键,VBA编辑界面,点击编辑的菜单:"插入"--"",然后在里面完整复制下面的代 ...
python如何将两个list合并成字典_怎么把两个列表合并成字典论Python怎样将两个list合并为一个字典...
Python怎样把2个列表合成为一个字典? 怎样把2个列表合成一个字典里了?如果你从一开始就选择低下头的话你就可以一直低着头.可是如果你一开始选择了昂着头的话你就永远不能低头了.荣辱说到底只是一瞬间的 ...
win10两个磁盘合并成一个?win10系统怎么合并磁盘
某用户购置了一台电脑,在电脑城有专业的人员为他安装了操作系统,操作系统是win10,并且对磁盘做好了分区.但是在使用一段时间后,该用户发现,原来的磁盘分区非常不合理. 首先,磁盘分区过多,导致每个磁盘 ...
html数组拼接,多个数组合并成一个
如何优雅的将多个数组合并成一个数组 import java.util.Arrays; //Java中如何把两个数组合并为一个 public class gog { public static void ...
将多个txt文本文件合并成一个txt文件
将多个txt文本文件合并成一个txt文件方法一:批处理文件有文档1.txt.2.txt 新建一个文档:合并文档.txt,在该合并文档中输入 copy/b 1.txt+2.txt 3.txt 将合并 ...
760-给定n个整数，将这n个整数合并成最大和最小的数字
题目如下给定n个整数,将这n个整数合并成最大和最小的数字例如:34,567,9,88.合并的最大数字为98856734,最小数字为34567889 解题思路找到数列的最大数字,将所有的数字变成和 ...
Linux中将多块新硬盘合并成一个，挂载到/mysqldata目录下
需求: 将两块空硬盘合并为"一块",挂载到指定目录(/data)下,达到在一个目录使用2块硬盘所有空间的效果. 逻辑卷管理(LVM) 逻辑卷 1.整合分散空间(整合未使用的磁盘空间 ...
mysql和sqlserver共存_mysql 和sqlserver的多行合并成一行
mysql 和sqlserver的多行合并成一行 mysql 多行合并: mysql 内置函数 group_concat(exper SEPARATOR " " ) expe ...

产品属性组合合并成表格显示（笛卡尔积)

vue 产品属性组合合并成表格显示（笛卡尔积）

需求

效果图

产品属性组合合并成表格显示（笛卡尔积)相关推荐

最新文章

热门文章