購物車chenckbox的全選 全不選 部分選 反選功能實現
阿新 • • 發佈:2020-07-09
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>
商品
</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> <img class="thumbnail-goods" :src="item.cover"> {{ 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都沒有選中,全選沒有被選中
},