如何实现全选操作

在我们做像购物车之类的页面，在做总的结算的时候，一般要做一个按下全选操作，那么列表中的状态也变为选上。如果列表中的物品都被选上了，那么下方的全选也自动被勾上。

下面看代码

const onChangeSelectedAll = () => {
  // 全选状态取反
  const _isSelectedAll = !isSelectedAll.value
  // 前端数据更新
  cartList.value.forEach((item) => {
    item.selected = _isSelectedAll
  })
  // 后端数据更新
  putMemberCartSelectedAPI({ selected: _isSelectedAll })
}

/**

• 这里是这么一回事 首先呢这个全选状态是依托多个单品的
• selected来决定的 比如说selected都为true 那么全选状态就是true
• 在点击主动点击全选按钮之后
• 然后给全选状态取反 赋值给_isSelectedAll 那么_isSelectedAll就是false
• 也就是说全选状态这时候就是false 然后呢 遍历所有单品
• 把所有单品selected都赋值为_isSelectedAll 即都是false了
• 那么就是说单品都是未选中状态 那么computed实时计算出isSelectedAll的值为false
• 那么全选状态就没有选上了
• 比如说现在一开始什么都没选 那么单品选中状态selected都是false
• 那么isSelectedAll就是false
• 然后呢 点击全选按钮 这时候_isSelectedAll就是true
• 然后呢 遍历所有单品 把所有单品selected都赋值为_isSelectedAll 即都是true了
• 那么就是说单品都是选中状态 那么computed实时计算出isSelectedAll的值为true
• 那么全选状态就选上了
• 一个由整体到局部再影响整体的过程 */