今天用了一下空闲时间来实现了购物车部分商品的单选和多选，下面来个案例供大家参考：
效果图：
案例代码如下：
<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>
