素材巴巴 > 程序开发 >

uniapp,vue购物车全选单选总额的解决方法

程序开发 2023-09-10 21:09:35

1.首先我们都知道uniapp的checkbox的原理。

2.在data数据中定义(首先需要确定的服务端发过来的数据中是有确定选择框是否选中的值)

3.首先完成全选,全选的业务逻辑就是,当全选被选中,单选全部选中,当全选未选中,单选一都不选中。

全选按钮:

业务逻辑:遍历购物车数据,将其的选中状态置为全选按钮的状态,即可

 4.单选的业务逻辑,当单选框全选中,全选也选中,当单选框只要有一项没选中,全选就要不选中。当某一个单选框状态改变时,我们可以判断,状态改变后,是选中还是没有选中,如果未选中,则全选框也为未选中,如果该单选框状态选中,则判断其他项单选框状态是否选中,如果都选中,则全选也为选中,如果有一项状态为未选中,则全选未选中。

单选:

单选逻辑:

5.对于算总钱数,就很简单了,为了复用,我们封装一个函数:

 6.然后只要在单选和全选逻辑后面都添加该函数,然后将data里面的钱数据渲染到页面即可。


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。