今天用了一下空閒時間來實現了購物車部分商品的單選和多選，下面來個案例供大家參考：
效果圖：![在這裏插入圖片描述]()
案例代碼如下：
<template>
<div class="text">
<div class v-for="(item,index) in dataList" :key="index">
<div class="yesterday">{{item.kinds}}</div>
<div class="list_wrap" v-for="(item1,index) in item.list" :key="index">
<div class="select_wrap" @click="selectItem(item1)">
<img class="select" src="https://i.loli.net/2020/03/05/2ODunK73vlaHhIw.png" mode v-if="item1.checked" />
<img class="select" src="https://i.loli.net/2020/03/05/zaBLDGlk2dCUwZQ.png" mode v-else />
</div>
<img class="btimg" :src="item1.img" mode />
<div class="item_wrap">
<div class="title">{{item1.title}}</div>
</div>
</div>
</div>
<div class="foot_wrap">
<div class="select_wrap" @click="selectAll">
<img class="select" src="https://i.loli.net/2020/03/05/2ODunK73vlaHhIw.png" mode v-if="isChecked" />
<img class="select" src="https://i.loli.net/2020/03/05/zaBLDGlk2dCUwZQ.png" mode v-else />
</div>
<div class="allselect">全選</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{
kinds: "分類1",
list: [
{
img:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=97571592,2934218527&fm=11&gp=0.jpg",
title: "時間看似殘忍，其實不然，只是美與真之間，總是留下真而已。",
checked: false
},
{
img:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1545504521,501407176&fm=11&gp=0.jpg",
title: "時間會見證和成全一切成長和改變。",
checked: false
},
{
img:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3394426466,628987709&fm=26&gp=0.jpg",
title:
"這一切還需要文字記錄，讓人心感受，所以文字乃我所喜愛之二。",
checked: false
},
{
img:
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1092627708,517203178&fm=11&gp=0.jpg",
title: "少年聽雨歌樓上，壯年聽雨客舟中，暮年聽雨僧廬下。",
checked: false
}
]
},
{
kinds: "分類2",
list: [
{
img:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3829540518,272129763&fm=11&gp=0.jpg",
title:
"公道世間唯白髮，貴人頭上不曾饒。少年易老學難成，一寸光陰不可輕。",
checked: false
},
{
img:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=186331454,2043130141&fm=26&gp=0.jpg",
title:
"願每個人都能發現最美的文字表達最真實的自己，不負韶華，留下最美時光。最美的時光沉澱出最美的文字，在最美的文字中追憶最美的時光。",
checked: false
},
{
img:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183246121,2109342373&fm=26&gp=0.jpg",
title:
"時間和文字在一個個老庭院裏廝磨，這是文化存在的極溫暖方式。千般荒涼，以此爲夢；萬里蹀躞，以此爲歸。",
checked: false
}
]
}
],
isChecked:false, // 是否全選
checkList:[], // 選中的項
};
},
methods: {
// 單選
selectItem(item) {
// console.log('item====>',item);
item.checked = !item.checked;
this.getCheck();
this.isChecked = this.isCheckedAll();
},
// 全選
selectAll(){
// console.log("全選。。。。");
// 先判斷是否有某一項沒有被選中,有，則讓每一項都變成選中，反之都變成不選中
let isSelectAll = this.isCheckedAll();
let lists = [...this.dataList];
for (let i = 0; i < lists.length; i++) {
const item = lists[i];
for (let j = 0; j < item.list.length; j++) {
const item1 = item.list[j];
item1.checked = !isSelectAll;
this.isChecked = !isSelectAll;
}
}
this.dataList = [...lists];
this.getCheck();
},
// 判斷各個項是否都被選中了
isCheckedAll(){
// 假設全部已經被選中
let isSelectAll = true;
// 遍歷數組，找出沒有被選中的項，推翻假設
let lists = [...this.dataList];
for (let i = 0; i < lists.length; i++) {
const item = lists[i];
for (let j = 0; j < item.list.length; j++) {
const item1 = item.list[j];
if(!item1.checked){
isSelectAll = false;
// 結束循環
return isSelectAll;
}
}
}
return isSelectAll;
},
// 拿到選中的項
getCheck(){
let newList = [...this.dataList];
let checkList = [];
newList.forEach((item,index)=>{
item.list.forEach((item1,index1)=>{
if(item1.checked){
checkList.push(item1)
}
})
})
this.checkList = [...checkList];
console.log("checkList===>選中的項",checkList);
}
}
};
</script>
<style lang="less" scoped>
.text {
background-color: #fff;
padding-bottom: 100px;
.yesterday {
text-align: left;
height: 40px;
line-height: 40px;
background-color: #f7f5f6;
font-size: 16px;
color: #222222;
padding-left: 15px;
}
.list_wrap {
display: flex;
margin: 15px;
.select_wrap {
height: 60px;
line-height: 60px;
margin-right: 10px;
.select {
width: 22px;
height: 22px;
margin-top: 35px;
}
}
.btimg {
width: 80px;
height: 80px;
margin-right: 5px;
}
.item_wrap {
flex: 1;
display: flex;
align-items: center;
.title {
font-size: 16px;
color: #222222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
}
}
.foot_wrap {
display: flex;
justify-content: start;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
font-size: 16px;
background-color: #f7f5f6;
padding-left: 15px;
.select_wrap {
margin-right: 10px;
.select {
width: 22px;
height: 22px;
}
}
}
}
</style>