新手上路，总遇到一些预想不到的bug，但总不同的方法去干掉它。
全选和多选在业务上是比较常见的，它实现的原理也非常简单。
以下是在vue中的做法：
<template>
<div class="wrapper">
<div
class="selected-all"
:class="{'isActive': selectedList.length === listData.length}"
>全选</div>
<div class="list-wrapper">
<div
class="list"
:class="{'isActive': selectedList.includes(item.id)}"
v-for="item in listData"
:key="item.id"
@click="handleClickToSelectedList(item.id)"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
listData: [
// 选项数据,用于生成列表
{
id: 1,
name: '吃饭'
},
{
id: 2,
name: '睡觉'
},
{
id: 3,
name: '打豆豆'
},
{
id: 4,
name: '打代码'
}
],
selectedList: [] // 选中的选项
}
},
methods: {
handleClickToSelectedList (id) { // 点击单个选项触发的函数
// includes() 方法判断是否包含某一元素,返回 true 或 false 表示是否包含元素,对 NaN一样有效
if (this.selectedList.includes(id)) {
// filter() 方法用于把 Array 的某些元素过滤掉, filter() 把传入的函数依次作用于每个元素,然后根据返回值是 true 还是 false 决定保留还是丢弃该元素: 生成新的数组
this.selectedList = this.selectedList.filter(item => {
return item !== id
// 当filter() 为假时删除元素
})
} else {
this.selectedList.push(id)
}
}
}
}
</script>
<style lang="scss" scoped>
// 采用的是 scss 的 css 预处理
.wrapper {
font-size: 30px;
display: flex;
.selected-all {
display: flex;
align-items: center;
margin: 50px;
&::before {
content: "";
width: 20px;
height: 20px;
display: block;
margin-right: 15px;
background-color: #666;
}
&.isActive {
color: #f44;
&::before {
background-color: #f44;
}
}
}
.list {
display: flex;
align-items: center;
margin: 100px;
&::before {
content: "";
width: 20px;
height: 20px;
display: block;
margin-right: 15px;
background-color: #666;
}
&.isActive {
color: #f44;
&::before {
background-color: #f44;
}
}
}
}
</style>
布局图效果图，按自己需求布局即可，这里只是演示
image.png
选中时效果图
image.png
全选时效果图
image.png
总结：
全选和多选功能只要是用到 Array.includes() 和 filter() 两个js方法
includes() 方法判断是否包含某一元素,返回 true 或 false 表示是否包含元素,对 NaN一样有效
**filter() 方法用于把 Array 的某些元素过滤掉, filter() 把传入的函数依次作用于每个元素,然后根据返回值是 true 还是 false 决定保留还是丢弃该元素: 生成新的数组 ------ 当filter() 为假时删除元素 **
