5.Vant移动组件库——修改复选框组选中状态

255 阅读2分钟

项目需求,在添加成员面板中,每次点击折叠面板希望不是手风琴模式,且选中的成员不会在点击下一个折叠面板后,被取消选中状态(因为获取数据后重新赋值)

但因为每个折叠面板里的数据是点击之后获取id才去发起请求,获取的成员数据每次都是拼接后重新赋值给memberLists,所以需要在赋值给memberLists前,进行判断操作,如下:

result是复选框组的v-model

image.png

        setTimeout(() => {
        // 1.获取的数据去重
          searchArr = [...new Set(searchArr.map((e) => JSON.stringify(e)))].map(
            (e) => JSON.parse(e)
          );
          // 2.数据赋值
          this.memberLists = searchArr;
          // 3.因为是异步操作,暂且通过定时器获取完整的数据
          setTimeout(() => {
          // 4.存放result集合里与获取的数据里有一样值的index,result的索引
            let delArr = [];
            this.memberLists.map((item) => {
              this.result.map((v, index) => {
                if (item.id == v.id) {
                  // 5.遍历获取的单项数据与result集合的值一样,存储此时的index
                  delArr.push(index);
                  // 6.根据判断的id,进行字符串拼接,将对应的数据的toggle进行切换
                  this.$refs[`checkMember${v.id}`][0].toggle(true);
                }
              });
            });
            // 7.删除result集合里重复的数据
            // 因为当数据重新赋值后,选中状态的数据实际上又被我们自动添加到了result集合里,所以每次获取数据将已选中状态选中后,应当将集合里原先的重复的数据删除,避免了数据重复,造成后面的选中状态取消时无法取消的问题
            delArr.map((item, i) => {
              if (i == 0) {
                this.removeArray(this.result, this.result[item]);
              } else {
                this.removeArray(this.result, this.result[item - i]);
              }
            });
            console.log(this.result);
            // 8.对delArr清零
            delArr = []
          }, 300);
        }, 300);
        
        
    // 移除数组中对应的对象
    removeArray(_arr, _obj) {
      let length = _arr.length;
      console.log(_arr);
      for (let i = 0; i < length; i++) {
        if (_arr[i] === _obj) {
          if (i === 0) {
            _arr.shift(); //删除并返回数组的第一个元素
            console.log(1);
            return _arr;
          } else if (i === length - 1) {
            _arr.pop(); //删除并返回数组的最后一个元素
            console.log(2);

            return _arr;
          } else {
            _arr.splice(i, 1); //删除下标为i的元素
            console.log(3);

            return _arr;
          }
        }
      }
    },

总结:

:ref="'checkMember' + member.id"

this.$refs[`checkMember${v.id}`][0].toggle(true);