一招搞定，vue项目开发中的 [全选-多选] 功能！

新手上路，总遇到一些预想不到的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() 为假时删除元素 **