javascript - 类似淘宝购物车的“全选”和“价格求和”用vuejs怎么做?
高洛峰
高洛峰 2017-04-11 11:01:22
0
5
824

类似淘宝购物车的“全选”和“价格自动求和”用vuejs怎么做?如果单使用vuejs不方便的话混合jquery也行。
demo:https://jsfiddle.net/kanjiushi/n4uujq01/6/

因为jsfiddle可能无法访问,所以再贴一下代码:

        
  

Cart

Goods

Number

Money

Sum

{{ sum }}

截图:

说明:
1、全选和取消全选

(1)、选中最上面的“全选”复选框,会全部选中下面的项;取消最上面的“全选”复选框,下面的项会全部取消。

(2)、手动选中下面的每一项,当全部选中时,最上面的“全选”复选框会自动选中;再取消一项时,“全选”复选框会取消选中,也就是没有处于全选状态时,“全选”复选框不会处于选中状态。

2、下面的“合计”,会自动对选中的项进行金额合计。

3、当没有选中项时,提交按钮处于不可用状态。刚打开页面的时候,默认是没有选中任何项的,所以这时提交按钮应处于不可用状态。

还有一个问题:
当前的demo,当选择数量的时候,所有的行的数量都会改变,应该分开的才对,不知道怎么才可以分开?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all (5)
刘奇

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

            Latest Downloads
            More>
            Web Effects
            Website Source Code
            Website Materials
            Front End Template
            About us Disclaimer Sitemap
            php.cn:Public welfare online PHP training,Help PHP learners grow quickly!