老师 全选这种效果怎么实现阿?

老师 全选这种效果怎么实现阿?

全勾选的时候 点全选全取消
全不勾选的时候 点全选全选中
存在勾选和不勾选的 点全选为全选中

尝试写了下,没效果:

    //  遍历全选逻辑
     allchance(state,OneCartProduct){
      const {shopId}=OneCartProduct;
      let productlist=state.cartList[shopId].productList;

      let checked=0;
      for(let i in productlist){
        if(productlist[i].check===true){
          checked+=1;
        }
      }

      if(checked===0){
        //则为全不选的时候
        for(let i in productlist){
          productlist[i].check=true;
        }
      }
      if(checked>0&&checked<productlist.length){
        for(let i in productlist){
          productlist[i].check=true;
        }
      }
      if(checked===productlist.length){
        // 则为全都勾选的情况
        for(let i in productlist){
          productlist[i].check=false;
        }
    
      }

     },

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,并不清楚同学其他完整代码具体如何书写的,这里以源码为例,可以参考如下思路调整:

1、Cart.vue文件中,自定义一个变量isAllChecked用来表示是否已经全部选中,默认值true。当点击“全选”按钮时,如果allChecked值为true,就将isAllChecked值设置为false,否则就设置为true。然后传递给mutations中的setCartItemsChecked方法中。

https://img1.sycdn.imooc.com//climg/616bc7b109e0778810000347.jpg

2、store/index.js文件中,接收传递过来的isAllChecked,并将这个值添加设置为product的check属性即可,如下:

https://img1.sycdn.imooc.com//climg/616bc82509d81a7407450465.jpg

同学根据老师提供的思路,先尝试在源码中完成该功能,然后再结合自己的代码调整。

祝学习愉快~

  • 鸣蜩十柒 提问者 #1

    哇, 谢谢谢 刚看到 顺着老师的思路 改了下就好了    

    谢谢老师,这个思路很绝

    2023-02-12 16:13:30
  • 鸣蜩十柒 提问者 #2

    allChecked为一个方法 返回一个布尔类型的值来 判断全选按钮是否被勾选上


    从全选按钮切入点下手思考 逻辑就分成了两份,

    从下面的若干按钮下手, 思路分成了三份且不容易实现

    2023-02-12 16:15:59
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师