最近遇到了一个奇怪的问题,搞了3天,el-switch el-checkbox el-collapse等等 for循环中点击无效果。先阐述下我的数据结构吧。。但是这个数据是子组件传给父组件的,两层循环里面渲染el-switch 和el-checkbox,点击无效果。
先上页面,没调样式,有点丑啊。。各位多包涵。
packageList = [
{
id: 1,
offerNum: 50013,
pcSkuLst: [
{
checkFlag: true,
id: 1,
skuNum: 5001300,
optionalFlag: 0
}
],
foldFlag: false
},
{
id: 1,
offerNum: 50013,
pcSkuLst: [
{
heckFlag: true,
id: 1,
skuNum: 5001301,
optionalFlag: 0
},
{
checkFlag: true,
id: 1,
skuNum: 5001301,
optionalFlag: 1
}
],
foldFlag: false
}
]
起初,用element的el-collapse组件时,因为要在自定义头部添加el-checkbox,点击checkbox时,会触发面板的折叠展开事件,内部的el-switch也不起作用。。我把el-switch等组件直接放在我的页面最外层时,单独使用data下的数据flag.效果没有问题,数据也无问题,导致我一度怀疑是element循环嵌套导致的。后来我就舍弃了element,自己div套div写折叠面板,还是两层for循环渲染,实现面板折叠展开时图标切换不起作用,
但是item.foldFlag点击时已经变化了,可是页面上样式没变化,后来选择使用强制刷新packageList
changePackageFlag(){
item.flodFlag = !item.flodFlag;
// this.packageList.reverse().reverse();
this.$set(this.packageList, itemIndex, item);
}
两次reverse倒置数组也可以,使用$set也可以强制刷新。可以解决折叠样式问题。
changeSkuFlag也是一样,点击没有切换效果。需要强制更新数据,使用$set对于二级循环的没有作用。。。崩溃
changeSkuFlag(sku, skuIndex, itemIndex) {
sku.flodFlag = !sku.flodFlag;
console.log(sku.flodFlag);
// this.$set(
// this.packageList[itemIndex],
// skuIndex,
// this.packageList[itemIndex].pcSkuLst
// );
this.packageList.reverse().reverse();
},
还用那个最消耗性能的reverse吧。。可以了。二层的折叠面板能折叠了。wonderful
但是!折叠展开后的switch切换不起作用,于是也想通过强制刷新来解决,结果不尽如人意。。。
于是我把子传父的数据packageList在页面的最外层两层循环渲染el-switch也不能正常实现切换效果,直接packageList写死在data里,不通过子传父传过来,就可以实现切换,于是考虑是数据的问题了,
就把子传父的数据处理了一下。
然后,问题就解决了。。
最后再来说下深拷贝浅拷贝吧。
浅拷贝只是对指针的拷贝,拷贝后两个指针指向同一个内存空间,深拷贝不但对指针进行拷贝,而且对指针指向的内容进行拷贝,经深拷贝后的指针是指向两个不同地址的指针。
方法:JSON.parse(JSON.stringify(obj))
//这种方法只适用于纯数据json对象的深度克隆,因为有些时候,这种方法也有缺陷