小程序多个表格van-checkbox全选、全不选

 效果图：

​​​​​​​

 

代码：

wxml：

<!-- 商品信息 -->
<van-cell-group border="{{false}}">
    <van-cell-group data-data="{{item}}" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index">
        <view class="remindBox">
        <van-cell size="large" center="true">
            <view slot="title" class="margin-left-5 font-size-15 bold">订单号：{{item.orderNum}}</view>
            <view slot="title" class="margin-left-5 text-color-999999 font-size-14">{{item.companyName}}</view>
        </van-cell>
        <van-cell-group border="{{false}}" wx:if="{{item.produceVoList.length != 0}}">
            <van-cell center="true" title-width="50px" border="{{false}}" style="justify-content: space-around;">
                <van-row>
                    <van-col span="10">
                        <view class="text-align-center text-color-333333 font-size-14 line-height ">餐盒编码</view>
                    </van-col>
                    <van-col span="10">
                        <view class="text-align-center text-color-333333 font-size-14 line-height ">保质期</view>
                    </van-col>
                    <van-col span="4">
                        <van-checkbox custom-class="padding-top-10 padding-bottom-10 " value="{{ item.select_all }}" 
                        label-position="left" shape="square" data-index="{{index}}" bind:change="onSelectAll"/>
                    </van-col>
                </van-row>
                <van-row wx:for="{{ item.produceVoList }}" wx:for-item="item_item" wx:for-index="indexs" wx:key="index" id="{{index}}" >
                <van-col span="10">
                    <view class="text-align-center text-color-333333 font-size-14 line-height {{indexs%2==0?'background-color-EDF1F5':''}}">{{item_item.palletNum}}</view>
                </van-col>
                <van-col span="10">
                    <view class="text-align-center text-color-333333 font-size-14 line-height {{indexs%2==0?'background-color-EDF1F5':''}}">{{item_item.expirationDate}}</view>
                </van-col>
                <van-col span="4">
                    <view class="text-align-center text-color-333333 font-size-14 line-height {{indexs%2==0?'background-color-EDF1F5':''}}">
                    <van-checkbox custom-class="padding-top-10 padding-bottom-10 " value="{{ item_item.select }}" label-position="left" shape="square" data-index="{{index}}" data-indexs="{{indexs}}" bind:change="onSelect"/>
                    </view>
                </van-col>
            </van-row>
            </van-cell>
            
        </van-cell-group>
        </view>
        <view-divider />
    </van-cell-group>
</van-cell-group>
<view class="space100" />
<!-- 底部按钮 -->
<van-popup
    show="{{ true }}"
    overlay="{{false}}"
    position="bottom"
    duration="0"
    custom-style="box-shadow: 0px 5px 54px 0px rgba(49,132,184,0.2196);">
    <van-cell 
        border="{{false}}"
        center="true" size="large"  >
        <van-button   
            round
            color="#FA5151" 
            bind:click="deliverClick">确认发货
        </van-button>
    </van-cell>
</van-popup>

js:

var Network = require('../../../../datas/js/network');
var UserInfo = require('../../../../datas/js/userInfo');

const API_list = "url";
const API_on = "url";

data: {
        baseImgUrl:Network.BaseImgUrl,
        list:[],
        page:1,
        total:0,
    },

init(){
      var params = {
        current:this.data.page,
        size:9999,
      };
      Network.getJsonRequest(API_list ,params,(res)=>{
        var list = res.data.records;
        for (var i = 0; i < list.length; i++) {
            var item=list[i]
            item.select_all=false;
            for (let ii = 0; ii < item.length; ii++) {
                var item_item = item[ii];
                item_item.select=false
            }
        }
        this.setData({
          list: list,
          total: res.data.total,
        })
      });
    },

onSelectAll(e){
        let index=e.currentTarget.dataset.index
        let list=this.data.list
        list[index].select_all=!list[index].select_all
        for (let i = 0; i < list[index].produceVoList.length; i++) {
            var item = list[index].produceVoList[i];
            item.select=list[index].select_all
        }
        this.setData({
            list,
        })
    },
    onSelect(e){
        let index=e.currentTarget.dataset.index
        let indexs=e.currentTarget.dataset.indexs
        let list=this.data.list
        list[index].produceVoList[indexs].select=!list[index].produceVoList[indexs].select
        this.checkSelect(index)
        this.setData({
            list,
        })
    },
    checkSelect(index){
        let list=this.data.list
        for (let i = 0; i < list[index].produceVoList.length; i++) {
            var item = list[index].produceVoList[i];
            if (!item.select) {
                list[index].select_all=false
                break;
            }else{
                list[index].select_all=true
            }
        }
        this.setData({
            list,
        })
    },

// 确认发货
    deliverClick(){
      let list=this.data.list;
      let ids=''
      for (let i = 0; i < list.length; i++) {
          var item = list[i];
          for (let i = 0; i < item.produceVoList.length; i++) {
            var item_item = item.produceVoList[i];
            if (item_item.select) {
                if (ids) {
                    ids=ids+','+item_item.id
                }else{
                    ids=item_item.id
                }
            }
        }
      }
      if(ids) {
        Network.postJsonRequest(API_deliver,{ids}, (res) => {
            if (res.code==0) {
              wx.showToast({
                title: '提交发货成功',
                icon: "success",
                complete:function(){
                    setTimeout(() => {
                        wx.navigateBack();
                    }, 1000);
                }
              });
            }
          });
      } else {
        wx.showToast({
            title: '请选择餐盒后再提交',
            icon: 'none'
          });
      }
    },