第一个问题:选中问题
项目是用的element ui 中的 那个级联选择器,为了实现一个需求:当手动全选某个父数据下的子数据后,右边自动显示当前所有子数据的父数据
之前一个同事为了实现这个需求写了一大串的代码,丢给我后我是真看不懂他的代码,但是我摸索着写了一下午 js 也没实现,四级联动,感觉太复杂,后来找到一个方法:
这个方法可以获取到自己选中的节点几乎所有的属性(包括是否选中,下级列表等等),然后根据规则: 自己存在并且自己的父级也存在而且选中了,那就排除本身,代码如下:
let checkArr = this.$refs.interestRef.getCheckedNodes();
checkArr = checkArr.filter(item => !(item.parent && item.parent.checked));
let selectData = [];
checkArr.forEach(item=>{
selectData.push(item.data)
})
第二个问题:点击右边的 × 取消左边的显示,×掉父级,其下所有子集也全部取消。
这个问题是很简单,只要拿到要取消的元素,在循环排除取消元素的子数据就行。我开始用的forEach循环,逐个判断然后再splice,发现一直会漏删,最后找到原因:
解决办法:使用 for 循环,倒叙删除,代码如下
/* 获取需要删除id列表 */
let child_ids = item.id;
child_ids = String(child_ids);
if(item.list){
item.list.forEach((itemc,indexc)=>{
child_ids +=',' + itemc.id;
if(itemc.list){
itemc.list.forEach((itemcc,indexcc)=>{
child_ids +=',' + itemcc.id;
if(itemcc.list){
itemcc.list.forEach((itemccc,indexccc)=>{
child_ids +=',' + itemccc.id;
})
}
})
}
})
}
/* 开始删除 */
for(let i=action_categories.length -1;i>=0;i--){
if(child_ids.indexOf(action_categories[i]) !== -1){
action_categories.splice(i,1);
}
}
至此完美解决。