element树形控件子节点重复的问题处理

记录一次使用element树形控件踩的坑


需求:这次要做的是角色权限配置的需求,需要使用element树形控件来给对应的角色分配对应的导航菜单,像下图这样

问题:写的时候主要问题就是只选择一个子组件不选父组件的时候会打印出两条数据,一条完整的父节点包含子节点的数据,一条单纯只有子节点数据。此时需要把勾选的数据信息传给后台
在这里插入图片描述
data是点击的数据,checked是勾选的数据
这样写了以后打印出的数据就会有父组件包含子组件的,也有单个子组件的,总之会很乱
在这里插入图片描述
就会出现类似这样的bug效果,,还有其他菜单混乱的效果
在这里插入图片描述
解决方法:应该是先获取到全部已勾选的菜单数据,勾选到的菜单先判断它是否有子节点,有子节点的话要循环一下子节点然后跟全部勾选的菜单数据去重一下,有相同的话就只保留单个的子节点数据,全部相同的话就保留整个父节点的数据
在这里插入图片描述
在这里插入图片描述
这样就解决问题了,研究了很长时间,尝试了很多都没实现,其实一开始想清思路了就是在删除这块一直没写好,主要就是获取的集合下标不对,所以一直无法正确删除重复的数据,然后看到百度搜的可以这样通过id来获取对应的下标。学到了学到了嘿嘿,也给大家分享一下

var index = checked.map(function (item) {
    
     return item.id; }).indexOf(item.id);

猜你喜欢

转载自blog.csdn.net/yangsi0706/article/details/116937671