vue中多选框的选中问题和主动取消回显问题

用户8568307

发布于 2022-03-14 14:59:51

2.2K0

发布于 2022-03-14 14:59:51

文章被收录于专栏：PHP全栈技术

第一个问题：选中问题

项目是用的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);
                }
            }

至此完美解决。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

element