使用vue $set,es6 every全选单选实现

html:

<div class="pro-detail" v-for="(item, index) in saleafteProducts" :key="index">
  <div class="check-box">
     <el-checkbox v-model="item.checked" @change="checkOneBox(item)"></el-checkbox>
   </div>
 </div>
 <div><el-checkbox v-model="selectAll" label="全选" @change="checkAll"></el-checkbox></div>

js:

//data
selectAll: false // 是否为全选
checkAllId: [] // 所选到的id
// 先给数组里每个对象设置默认 使用set （对象，属性，属性值）  每个对象里会多一个checked属性为false
this.saleafteProducts.forEach(item => {
  this.$set(item, 'checked', this.selectAll)
 })
 //点击全选 给val赋值true或false 则会实现全选 非全选 
// 全选
   checkAll (val) {
     this.checkAllId = []
     this.saleafteProducts.forEach(item => {
       item.checked = val
     })
     if (val) {
       this.saleafteProducts.forEach(item => {
         this.checkAllId.push(item.productId)
       })
     } else {
       this.checkAllId = []
     }
     console.log(this.checkAllId)
   }
// 单选 使用every遍历数组每一项，每一项返回true,则最终结果为true。当任何一项返回false时，停止遍历，返回false。不改变原数组
    checkOneBox (item) {
      // 判断是否全选
      if (this.saleafteProducts.every(item => item.checked === true)) {
        this.selectAll = true
      } else {
        this.selectAll = false
      }
      // 如果被点击则存其id
      if (item.checked) {
        this.checkAllId.push(item.productId)
      } else {
        // 删除数组里取消选择的id
        for (let i = 0; i < this.checkAllId.length; i++) {
          if (this.checkAllId[i] === item.productId) {
            this.checkAllId.splice(i, 1)
          }
        }
      }
      console.log(this.checkAllId)
    }