效果
场景:Vue全选框在头部,子框在v-for循环内部。
实现:点击全选框,所有子项选中,再次点击取消;子项全选中,全选框自动勾选,子项并未全选,全选框不勾选;已选和全选数量统计;
实现
#1. html
<div class="checkall" :class="isCheck?'active':''" @click="clickAll"></div><span>全选</span>
<div class="card" v-for="(item, index) in tableData" :key="index">
<div class="checkitem" :class="item.isCheck?'active':''" @click="clickItem(item.id)"></div>
</div>
#2. js
data() {
return {
tableData: [],
isCheck:false,
Selected: 0,
SelectAll: 0,
}
},
mounted:{
this.init();
}
methods:{
async init(){
let res = await ...; //请求
this.tableData = res.data
this.SelectAll = res.data.length;
this.tableData = this.tableData.map(item => {
item.isCheck = false
return item
})
},
clickItem(id){
this.table