如图，销售属性是后台返回的，最多可以选择两项销售属性。
title图片左边的是选择的属性，图片以及图片右边的是固定的。
html代码：
<div class="details-main-product">
<div class="product-title">销售属性</div>
<div class="product-main">
<div class="sale-attr" v-for="item in saleAttrList">
<label>{{item.label}}:</label>
<el-checkbox v-for="info in item.attrList" @change="checkAttr(info)" v-model="info.checkedValue"
:key="info.id">{{info.label}}
</el-checkbox>
</div>
</div>
</div>
<div class="details-main-product">
<div class="product-title">SKU定义</div>
<div class="product-main">
<div>
<ul style="border: 1px solid #f4f4f5;border-bottom: none;" v-if="skuList.length > 0">
<li class="sku-title">
<!--<span v-for="item in skuTitle">{{item.label}}</span>-->
<span v-for="(item,index) in skuTitle" :key="index">{{item.label}}</span>
</li>
<li class="sku-table" v-for="(item,index) in skuList" :key="index">
<div class="input-wrap" v-for="(info,index) in item.attrList" :key="index">
<el-input type="text" v-model="info.label" disabled placeholder="请输入..."></el-input>
</div>
<!--<div class="input-wrap">-->
<!--<el-input type="text" v-model="item.label" disabled placeholder="请输入..."></el-input>-->
<!--</div>-->
<div class="input-wrap">
<upload-img :ref="item.img" :image-count="uploadCount" size="mini" class="sku-img"></upload-img>
</div>
<div class="input-wrap">
<el-input type="text" v-model="item.originalPrice" placeholder="请输入..."></el-input>
</div>
<div class="input-wrap">
<el-input type="text" v-model="item.price" placeholder="请输入..."></el-input>
</div>
<div class="input-wrap">
<el-input type="text" v-model="item.skuNumber" placeholder="请输入..."></el-input>
</div>
<div class="input-wrap"><span style="color: blue;cursor: pointer;">删除</span></div>
</li>
</ul>
<div style="color: red;text-align: center;padding: 10px 0;" v-else>请选择销售属性</div>
</div>
</div>
</div>
js代码：
模拟数据：
skuTitle: [
{
label: '图片',
},
{
label: '原价(元)'
},
{
label: '售价(元)'
},
{
label: '商家SKU编号'
},
{
label: ''
}
],
skuList: [],
//销售属性
saleAttrList: [
{
label: '颜色',
id: '1',
attrList: [
{
label: '白色',
pId: '1',
id: '11',
pName: '颜色',
checkedValue: false
},
{
label: '黑色',
pId: '1',
id: '12',
pName: '颜色',
checkedValue: false
},
{
label: '紫色',
pId: '1',
id: '13',
pName: '颜色',
checkedValue: false
},
{
label: '红色',
pId: '1',
id: '14',
pName: '颜色',
checkedValue: false
},
{
label: '蓝色',
pId: '1',
id: '15',
pName: '颜色',
checkedValue: false
}
]
},
{
label: '尺寸',
id: '2',
attrList: [
{
label: '25',
pId: '2',
id: '21',
pName: '尺寸',
checkedValue: false
},
{
label: '26',
pId: '2',
id: '22',
pName: '尺寸',
checkedValue: false
},
{
label: '27',
pId: '2',
id: '23',
pName: '尺寸',
checkedValue: false
},
{
label: '28',
pId: '2',
id: '24',
pName: '尺寸',
checkedValue: false
}
]
},
{
label: '配置',
id: '3',
attrList: [
{
label: '牛逼',
pId: '3',
id: '31',
pName: '配置',
checkedValue: false
},
{
label: '很牛逼',
pId: '3',
id: '32',
pName: '配置',
checkedValue: false
},
{
label: '非常牛逼',
pId: '3',
id: '33',
pName: '配置',
checkedValue: false
}
]
},
{
label: '测试',
id: '4',
attrList: [
{
label: '你好',
pId: '4',
id: '41',
pName: '测试',
checkedValue: false
},
{
label: '我好',
pId: '4',
id: '42',
pName: '测试',
checkedValue: false
},
{
label: '大家好',
pId: '4',
id: '43',
pName: '测试',
checkedValue: false
},
{
label: '你不好',
pId: '4',
id: '44',
pName: '测试',
checkedValue: false
},
{
label: '我不好',
pId: '4',
id: '45',
pName: '测试',
checkedValue: false
},
{
label: '大家都不好',
pId: '4',
id: '46',
pName: '测试',
checkedValue: false
},
]
}
],
JS选择SKU时的事件：
checkAttr(info) {
//SKU列表内的数据初始化
let obj = {
attrList:[],
img: '',
originalPrice: '',
price: '',
skuNumber: '',
};
// console.log(info);
// console.log('title',this.skuTitle);
// console.log('list',this.skuList);
//判断是勾选还是取消
if (info.checkedValue) {
//判断是否有当前这个属性了
let isTitleBool = true;
this.skuTitle.map((item) => {
if (item.label == info.pName) {
isTitleBool = false;
}
});
//如果有当前这个属性则不再添加title并判断选择了几个属性了
if (isTitleBool) {
if (this.skuTitle.length > 6) {
info.checkedValue = false;
this.$message({
type: 'warning',
message: '最多选择两个属性'
});
return false;
} else {
//如果选择的属性低于2个则添加
this.skuTitle.unshift({label: info.pName});
}
}
//SKU列表内的初始化数据更新
obj.attrList.unshift(info);
//判断当前点击的这一项属性在skuList列表内有没有
let isPIdBool = false;
this.skuList.map((item,index) => {
item.attrList.map((data,j) => {
if(data.pId == info.pId){
isPIdBool = true;
}
});
});
//如果当前有这一项属性 或者 (this.skuList.length < 1)代表是第一次添加属性，那skuList直接加一行
if(isPIdBool || (this.skuList.length < 1)){
//如果当前有两个属性了，那么每添加一个都得在所有的attrList内添加
if(this.skuTitle.length > 6){
console.log(this.skuList);
console.log(obj);
let arr = {};
console.log(this.skuTitle[0].label);
this.skuList.map((item,index) => {
item.attrList.map((data,j) => {
if(data.pName != info.pName){
arr = data;
}
})
});
console.log(arr);
obj.attrList.push(arr);
console.log('222',obj);
this.skuList.push(obj);
}else {
this.skuList.push(obj);
}
}else {
//如果不满足判断则代表是新的属性添加，需将之前的所有的attrList都添加上这项新属性
this.skuList.map((item,index) => {
item.attrList.unshift(obj.attrList[0])
});
}
} else {
//如果点击取消勾选
//判断点击取消的是哪个title
let i = -1;
this.skuTitle.map((item, index) => {
if (item.label == info.pName) {
i = index;
}
});
//删除所有的含当前取消的属性的SKU列表
let isSpliceBoll = false;
for(let i = 0; i < this.skuList.length; i++){
for(let j = 0; j < this.skuList[i].attrList.length; j++) {
if(this.skuList[i].attrList[j].pName == info.pName){
this.skuList[i].attrList.splice(j, 1);
j--;
isSpliceBoll = true;
}
}
//如果当前属性列表内没有数据了则删除这个skuList
if(this.skuList[i].attrList.length < 1){
this.skuList.splice(i, 1);
i--;
}
}
// this.skuList.map((item, index) => {
// if (item.pName == info.pName) {
// isSpliceBoll = true;
// k = index;
// }
// });
// this.skuList.splice(i, 1);
//如果skuList内还有当前这一项则不删除title
if (i != -1 && !isSpliceBoll) {
this.skuTitle.splice(i, 1);
}
}
// this.skuList.push(info);
// this.skuList.map((item) => );
// console.log(this.skuList);
},
因项目比较紧急，所以今天思考了一天后，不能再拖，所以前来求助。
求大佬给个正确的思路。
万分感谢！
