类似淘宝购物车的“全选”和“价格自动求和”用vuejs怎么做?如果单使用vuejs不方便的话混合jquery也行。
demo:https://jsfiddle.net/kanjiushi/n4uujq01/6/
因为jsfiddle可能无法访问,所以再贴一下代码:
Cart
Goods
Number
Money
截图:
说明:
1、全选和取消全选
(1)、选中最上面的“全选”复选框,会全部选中下面的项;取消最上面的“全选”复选框,下面的项会全部取消。
(2)、手动选中下面的每一项,当全部选中时,最上面的“全选”复选框会自动选中;再取消一项时,“全选”复选框会取消选中,也就是没有处于全选状态时,“全选”复选框不会处于选中状态。
2、下面的“合计”,会自动对选中的项进行金额合计。
3、当没有选中项时,提交按钮处于不可用状态。刚打开页面的时候,默认是没有选中任何项的,所以这时提交按钮应处于不可用状态。
还有一个问题:
当前的demo,当选择数量的时候,所有的行的数量都会改变,应该分开的才对,不知道怎么才可以分开?
Example
话说VueStrap的v-select是有点bug的,value只能是字符串而不能是数字,而且当选项中出现value=1,value=21,value=31...的时候,在单选情况下会出现选中多个的情况。
而且貌似v-select不支持@change事件,总体来说有点弱鸡(也有可能是我不懂得用)。
https://segmentfault.com/a/1190000004897016
价格合计用计算属性
全选
https://jsfiddle.net/papersnake/25bx2Lo9/2/
当然我这里处理的还是不严谨的,代码也写的很乱,但是处理逻辑还是对的
https://jsfiddle.net/chairuosen/gottgvLg/3/
你要的
很简单的方法,计算属性 computed