[代码优化]-针对于复杂的多层数据结构 - 获取选中的checkbox

获取不定级checbox选中的效果,如果选中所有子集,则默认取父级别的值,描述有不清楚的地方,做完后我会将代码全部上传到github上面查看效果,这样更利于理解
获取选中的checkbox
旧代码,虽然也做多了获取不定级别的value值,但是代码看起来很冗余

		let result = [];
        function getNode(item) {
          if (!item.children) return;
          //获取该对象选中的子list
          let checkList = item.children.filter(p => p.check == true);
          // console.log(checkList);
          if (checkList.length>0 && checkList.length === item.children.length) {
            item.check = true;
          }

          for (let p of item.children) {
            if (p.check) {
              result.push({
                label: p.label,
                value: p.value,
                check: true
              })
            } else {
              getNode(p);
            }
          }
        }

        this.list.map(item => {
          let checkList = item.children.filter(p => p.check == true);
          if(checkList.length<item.children.length){
            item.check = false;
          }
          if (item.check) {
            result.push({
              label: item.label,
              value: item.value,
              check: true
            })
          } else {
            getNode(item)
          }

        });
        console.log(result);
  • 优化后的代码
		let result = [];
        function getNode(item) {
          //获取该对象选中的子list
          let checkList = (item.children || []).filter(p => p.check == true);

		//自己的子集若是全部选中,则自己会自动选中,若是子集有一个没被选中,则自己不能被选中;用于处理父子check同步
          if (checkList && checkList.length && checkList.length === item.children.length) {
            item.check = true;
          }
          if (checkList && checkList.length && checkList.length < item.children.length) {
            item.check = false;
          }
          
          if (item.check) {
            result.push({
              label: item.label,
              value: item.value,
              check: true
            });
          } else {
            if (!item.children) return;
            (item.children || []).map(item => {
              getNode(item);
            })
          }
        }
        this.list.map(item => {
          getNode(item);
        });
        console.log(result)
        //this.$emit('update:objectValue', this.checkedList);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值