小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选

我是结合的vant weapp的checkbox实现的,less代码我就不给了

index.wpy

              
                
                  
                    
                  
                  {{list.materail_name}}
                  {{list.materail_brand}}
                  {{list.status}}
                
              
              
                
                  导出全部
                
              

 

index.js

import wepy from '@wepy/core';

wepy.page({
  data: {
    active: 0,
    checked:[],
    checkedAll:false,
    materailList:[
      {
        id:1001,
        materail_name:"卫生间仿古砖瓷砖800*800 x 80块",
        materail_brand:"鹰牌",
        status:"无货",
        isChecked:false
      },
      {
        id:1002,
        materail_name:"卫生间仿古砖瓷砖800*800 x 80块",
        materail_brand:"鹰牌",
        status:"有货",
        isChecked:false
      },
      {
        id:1003,
        materail_name:"卫生间仿古砖瓷砖800*800 x 80块",
        materail_brand:"鹰牌",
        status:"无货",
        isChecked:false
      }
    ]
  },
  methods: {
    onChange(event) {
      this.checked = event.$wx.detail;
      if(this.checked.length == this.materailList.length)
        this.checkedAll=true;
      else
        this.checkedAll=false;
    },
    changeTabbar(event){
      this.active = event.$wx.detail;
    },
    allChecked(event){
    /* 全选功能 */
      this.checked = this.materailList.map(item=>{
        return item.id.toString()
      })
      this.checkedAll=event.$wx.detail;
      if(this.checkedAll === false)
        this.checked = []
     }
  },
  onLoad() {

  }
})

主要的实现思路是，当你点击全选按钮时，遍历你的数据，在这儿也就是materailList，把每一项的id都放进this.checked数组中，这样就实现全选了。

这儿还实现了反选以及当其中有一个未选中时即全选状态不选中的效果。

希望能帮助到你们，有疑问的欢迎下方评论。