大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue+vant-UI框架如何实现购物车复选框全选和反选的功能-创新互联

小编给大家分享一下vue+vant-UI框架如何实现购物车复选框全选和反选的功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联是一家专业的成都网站建设公司,我们专注网站设计制作、成都网站建设、网络营销、企业网站建设,买链接广告投放为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。

购物车页面的设计图

vue+vant-UI框架如何实现购物车复选框全选和反选的功能

商品的列表

vue+vant-UI框架如何实现购物车复选框全选和反选的功能

代码:


  • {{item.goods_name}}

    {{item.now_price | formatMoney}} {{item.goods_qty}} +

    全选的复选框

    vue+vant-UI框架如何实现购物车复选框全选和反选的功能

    全选的代码:

    
         全选
         管理
         完成
         删除
         
          合计
          {{ totalPrice }}
          结算
         
        

    单选的change事件

    vue+vant-UI框架如何实现购物车复选框全选和反选的功能

    代码:

    // 单选的change事件
      chooseChange(id) {
       if (this.selectedData.indexOf(id) > -1) {
        this.remove(this.selectedData, id);
       } else {
        this.selectedData.push(id);
       }
       if (this.selectedData.length < this.shoppingListData.total) {
        this.AllChecked = false;
       } else {
        this.AllChecked = true;
       }
       console.log(this.selectedData);
      }

    全选的JS

    vue+vant-UI框架如何实现购物车复选框全选和反选的功能

    全选的代码:

    // 全选和反选
      checkAll() {
       let list = this.shoppingListData.rows;
       if (this.AllChecked) {
        list.forEach(element => {
         element.isChecked = false;
        });
        this.selectedData = [];
       } else {
        list.forEach(element => {
         element.isChecked = true;
         if (this.selectedData.indexOf(element.goods_id) < 0) {
          this.selectedData.push(element.goods_id);
         }
        });
        console.log(this.selectedData);
       }
      },

    数组删除

    vue+vant-UI框架如何实现购物车复选框全选和反选的功能

    代码

    //数组删除
      remove(arr, val) {
       var index = arr.indexOf(val);
       if (index > -1) {
        arr.splice(index, 1);
       }
      }

    以上是“vue+vant-UI框架如何实现购物车复选框全选和反选的功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    名称栏目:vue+vant-UI框架如何实现购物车复选框全选和反选的功能-创新互联
    标题网址:http://dzwzjz.com/article/djoppg.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP