首页 > 其他 > 详细

购物车chenckbox的全选 全不选 部分选 反选功能实现

时间:2020-07-09 12:33:55      阅读:68      评论:0      收藏:0      [点我收藏+]

1.data里面先定义两个变量,一个是定义总的checkbox,一个是定义列表的checkbox

data () {
      return {
        isAllChecked: false,
        checkedArray: []
      }
    },

2.给列表checkbox数组定义初始全不选

setCheckedArray () {
    this.checkedArray = this.cart.map(() => false)
},

this.cart定义的是所有数据的一个数组

3.现在   总的checkbox和列表的checkbox的初始化都已经完成

4.给总的checkbox和列表的checkbox的分别添加事件

4.1.总的checkbox添加onAllCheckChanged事件

<th class="col01">
  <Checkbox class="checkbox" v-model="isAllChecked" @change="onAllCheckChanged"></Checkbox>&nbsp;&nbsp;
          商品
</th>

4.2.onAllCheckChanged事件的js代码

onAllCheckChanged () {
     this.checkedArray.fill(this.isAllChecked)
},

全选选中,列表的checkbox都选中

全选没有选中,列表的checkbox都没有选中

4.3.列表的checkbox添加onCheckChanged事件

<td class="col01 one-line" :title="item.text">
    <Checkbox class="checkbox" v-model="checkedArray[index]" @change="onCheckChanged"></Checkbox>&nbsp;&nbsp;
    <img class="thumbnail-goods" :src="item.cover">&nbsp;
    {{ item.text }}
</td>

4.4.onCheckChanged事件的js代码

      onCheckChanged () {
        this.checkedArray.every(item => item) && (this.isAllChecked = true) // 列表的checkbox都选中,全选选中
        this.checkedArray.some(item => !item) && (this.isAllChecked = false) // 列表的checkbox都没有选中,全选没有被选中
},

 

购物车chenckbox的全选 全不选 部分选 反选功能实现

原文:https://www.cnblogs.com/pwindy/p/13272849.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!