怎么实现取消全选

怎么实现取消全选

怎么在实现全选后 ,点击一下全选来取消全选。实现这种效果https://img1.sycdn.imooc.com//climg/616b865909aa8f0b04220417.jpg

搜索

复制

正在回答

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

1回答

同学你好,以源码为例,可以参考如下思路实现效果:

1、调整Cart.vue文件中的setCartItemsChecked方法中的代码逻辑

http://img1.sycdn.imooc.com//climg/61231a9009a9041811100272.jpg

2、store/index.js文件中,setCartItemsChecked方法里接收allchecked,并根据这个值调整每个商品的checked值

http://img1.sycdn.imooc.com//climg/61231b280993edd810880495.jpg

实现效果如下:

http://img1.sycdn.imooc.com//climg/61231be00a54781405010694.jpg

祝学习愉快~

  • 雨辰悠悠 提问者 #1

    calculations 在哪定义的?

    2021-10-17 11:26:44
  • 好帮手慕慕子 回复 提问者 雨辰悠悠 #2

    同学你好,老师以“2-15通过 LocalStorage 实现购物车信息持久存储”这个源码为例给出的解决方案,所以calculations是后面老师讲解的内容。

    以当前小节的代码为例,可以参考如下思路调整:

    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

    祝学习愉快~

    2021-10-17 14:52:49
  • 老师我清空购物车这么写为什么不对?

    https://img1.sycdn.imooc.com//climg/62bfd41c0916826604540518.jpg

    https://img1.sycdn.imooc.com//climg/62bfd446095e6aeb06390555.jpg

    https://img1.sycdn.imooc.com//climg/62bfd4560943d65708130210.jpg

    搜索

    复制

    收藏
    2022-07-02 13:15:05
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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