VUE多选删除列表遇到的坑

页面效果

450fac086a7442c6873bcc9bc2e1872f.png

数据结构

        list: [{
          name: '名称1',
          indexs: [{
            tag: '标签1'
          },{
            tag: '标签2'
          },{
            tag: '标签3'
          },{
            tag: '标签4'
          }]
        },{
          name: '名称2',
          indexs: [{
            tag: '标签11'
          },{
            tag: '标签22'
          },{
            tag: '标签33'
          },{
            tag: '标签44'
          },{
            tag: '标签55'
          },{
            tag: '标签66'
          }]
        },{
          name: '名称3',
          indexs: [{
            tag: '标签111'
          },{
            tag: '标签222'
          }]
        },{
          name: '名称4',
          indexs: [{
            tag: '标签1111'
          },{
            tag: '标签2222'
          },{
            tag: '标签3333'
          }]
        },{
          name: '名称5',
          indexs: [{
            tag: '标签1'
          }]
        }]

实现功能

右侧多选框选中后批量删除，无接口对接本地实现，

遇到问题

一开始一直想的是foreach循环如果选中就删除，使用的foreach+splice（），然后遇到如下问题，选中四个只删除了两个(当时脑子不知道咋想的。。。)
[图片上传失败...(image-44b5f3-1662600608087)]

// 最开始写的删除方法
      deleteBtn() {
        this.list.forEach((i) =>{
          i.indexs.forEach((c,cIndex) =>{
            if(c.checked == true) {
              console.log(c.checked);
              i.indexs.splice(cIndex,1)
            }
          });
        });
       }

解决办法

        this.list.forEach((i) =>{
          // 删除选中对象
          i.indexs = i.indexs.filter(item => {
            return !item.checked
          });
        });
        // 该名称下标签为空删除名称
        this.list = this.list.filter(item2 => {
          return item2.indexs.length > 0;
        });

页面全部代码如下