1.data裡面先定義兩個變數，一個是定義總的checkbox，一個是定義列表的checkbox

data () {
      return {
        isAllChecked: false,
        checkedArray: []
      }
    },

2.給列表checkbox陣列定義初始全不選

setCheckedArray () {
    this.checkedArray = this.cart.map(() => false)
},

this.cart定義的是所有資料的一個數組

3.現在 總的checkbox和列表的checkbox的初始化都已經完成

4.給總的checkbox和列表的checkbox的分別新增事件

4.1.總的checkbox新增onAllCheckChanged事件

<th class="col01">
  <Checkbox class="checkbox" v-model="isAllChecked" @change="onAllCheckChanged"></Checkbox>&nbsp;&nbsp;
          商品
</th>

4.2.onAllCheckChanged事件的js程式碼

onAllCheckChanged () {
     
 
this.checkedArray.fill(this.isAllChecked)
},

全選選中，列表的checkbox都選中

全選沒有選中，列表的checkbox都沒有選中

4.3.列表的checkbox新增onCheckChanged事件

<td class="col01 one-line" :title="item.text">
    <Checkbox class="checkbox" v-model="checkedArray[index]" @change="onCheckChanged"></Checkbox>&nbsp;&nbsp;
    <img class="thumbnail-goods" :src="item.cover">&nbsp;
    {{ item.text }}
 
</td>

4.4.onCheckChanged事件的js程式碼

      onCheckChanged () {
        this.checkedArray.every(item => item) && (this.isAllChecked = true) // 列表的checkbox都選中，全選選中
        this.checkedArray.some(item => !item) && (this.isAllChecked = false) // 列表的checkbox都沒有選中，全選沒有被選中

},