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)
    }