vant 中复选框 实现 多选,反选,全选后点击单个全选按钮取消

钉钉H5微应用中使用了vant 组件,但是在做全选功能是出现了一个问题,当单个点击复选框时,把当前列表全部点击后可以实现全选按钮的自动选中。

但是当取消列表中的一个选中时整个的列表都会取消选择

列表代码

<div class="scroll">
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
        @change="groupChange"
      >
        <div
          class="scroll_box"
          :class="active == item.dingtalkProcessCode ? 'active' : ''"
          v-for="item in list"
          :key="item.dingtalkProcessCode"
        >
          <van-checkbox
            v-if="flag"
            :name="item.dingtalkProcessCode"
            style="padding: 0 20px"
          ></van-checkbox>
          <div @click="flag ? () => {} : clickHandler(item)" class="item">
            <div class="name">
              {{ item.processCreateEmployeeMap.dingtalkUserName }}
            </div>
            <div class="time">
              <span>{{
                timestampToDateString(item.dingtalkProcessStartTime)
              }}</span>
              <img
                style="width: 25px; height: 25px"
                src="../../../images/right.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>

 list为渲染列表,当这个选中的长度等于渲染长度时this.checked 为true,反之为false,但是当这个checked 发生变化时,就会触发全选的change事件,所以就会出现取消一个选中时,所有的都会取消。

  groupChange(val) {
      this.num = val.length;
      if (this.num == this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },

底部全选

 <div class="bottom bottomNavigation" v-if="flag">
      <div style="display: flex; align-items: center">
        <van-checkbox v-model="checked" @change="allChange">全选</van-checkbox>
        <span style="margin-left: 10px; color: red">已选择({{ num }})人</span>
      </div>
      <van-button
        type="info"
        @click="submitHandler"
        style="width: 90px; border-radius: 5px"
        >批量处理</van-button
      >
    </div>
 // 底部 全选复选框
    allChange(val) {
      this.$refs.checkboxGroup.toggleAll(val);
    },

 改进后

将底部的change事件改为click事件,但是会发现这个全选失灵了 ,这是我们使用一个额外的变量来代替这个checked ,即可实现该功能

通过这个点击时改变这个type,来实现控制全选,单独点击列表的复选框时,判断长度来控制多选

   
<div class="bottom bottomNavigation" v-if="flag">
      <div style="display: flex; align-items: center">
        <van-checkbox v-model="checked" @click="allChange">全选</van-checkbox>
        <span style="margin-left: 10px; color: red">已选择({{ num }})人</span>
      </div>
      <van-button
        type="info"
        @click="submitHandler"
        style="width: 90px; border-radius: 5px"
        >批量处理</van-button
      >
    </div>



// js 代码
  groupChange(val) {
      this.num = val.length;
      if (this.num == this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
// 底部 全选复选框
    allChange(val) {
       this.type = !this.type
      this.$refs.checkboxGroup.toggleAll(this.type);
    },

 效果图

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值