項目需求: 實現一個購物車 全選框實現對商家和商品的全選 商家全選框實現對當前商家所有商品的全選 取消其中一個商品則取消對應商家全選和全選框 選中一個商家下的所有商品則勾選對應商家的全選框,不勾選全選框 選中所有商品則勾選所有商家全選框和全選框 我的思路: 1、通過對數據的簡單操作可實現更深層次的全 ...
項目需求:
實現一個購物車
- 全選框實現對商家和商品的全選
- 商家全選框實現對當前商家所有商品的全選
- 取消其中一個商品則取消對應商家全選和全選框
- 選中一個商家下的所有商品則勾選對應商家的全選框,不勾選全選框
- 選中所有商品則勾選所有商家全選框和全選框
我的思路:
1、通過對數據的簡單操作可實現更深層次的全選操作
2、vue.$set(object, key, value)給對象添加屬性可以更新視圖
3、通過es6的every判斷數組中是否每個元素都滿足條件,都滿足返回true,有一個不滿足則返回false
html代碼:
<div class="box">
<input type="checkbox" v-model="checkedAll" @change="checkAll"> 全選
</div>
<div class="list" style="margin-left:50px;" v-for="(val,k) in data" :key="k">
<div class="box">
<input type="checkbox" v-model="val.checked" @change="_checkAll(val)">
{{val.seller}}
</div>
<ul v-for="(item,index) in val.goodsList" :key="index">
<li>
<input type="checkbox" v-model="item.checked" @change="handleCheck(item,index)">
{{item.name}}
</li>
</ul>
</div>
js代碼:
var app = new Vue({
el: "#app",
data: {
checkedAll: false, //控制是否全選
data: [{
seller: "商家1",
goodsList: [{
name: '商品1'
}]
}, {
seller: "商家2",
goodsList: [{
name: '商品2'
}, {
name: '商品3'
}]
}] //數據
},
mounted() {
this.data.forEach(item => {
this.$set(item, "checked", false) //Vue 解決不能檢測到對象屬性的添加或刪除
// item.checked = false; //如果為真實數據直接設置的對象改變值不會更新視圖
if (item.goodsList) {
item.goodsList.forEach((citem) => {
this.$set(citem, "checked", false)
// citem.checked = false;
})
}
});
},
methods: {
//全選
checkAll() {
this.data.forEach(item => {
item.checked = this.checkedAll;
if (item.goodsList) {
item.goodsList.forEach(citem => {
citem.checked = this.checkedAll;
})
}
})
},
//商家全選
_checkAll(val, k) {
val.goodsList.forEach(item => {
item.checked = val.checked;
});
if (this.data.every(item => item.checked)) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
//商品選擇框
handleCheck(item, index) {
var check = []; //保存中間層是否被選中的布爾值
this.data.forEach((items, index) => {
if (items.goodsList) {
var bool = items.goodsList.every(citem => citem.checked);
if (bool) {
items.checked = true;
} else {
items.checked = false;
}
check.push(bool);
}
})
if (check.indexOf(false) == -1) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
}
})