购物车（五）01-控制全选按钮的颜色——计算属性-只要有一个没有选中，那么全选按钮就是灰色

控制全选按钮的颜色——计算属性-只要有一个没有选中，那么全选按钮就是灰色

• 实现思路：根据所有商品的选中与否决定全选按钮的颜色

isAll() {
  // 控制全选按钮的颜色：所有的商品都选中，那么全选按钮变红
  // 只要有一个没有选中，那么全选按钮就是灰色
  let flag = true
  /*
    this.cart = {
      12312: {
        goods_price: 100,
        num: 1,
        checked: false
      },
      12313: {
        goods_price: 100,
        num: 1,
        checked: false
      }
    }
  */
  // 只要有一件商品没有选中，那么全选按钮就是灰色
  for(let key in this.cart) {
    let p = this.cart[key]
    // p.checked为false表示没有选中
    if(p.checked === false) {
      flag = false
      break
    }
  }
  return flag
}

实例

结构 :color="value.checked?'red':'#eee'"

<!-- 左侧按钮checkbox -->
<div class="choice-button">
  <icon @click='toggleSingle(name)' :color="value.checked?'red':'#eee'" type='success' size='18'/>
</div>

逻辑 根据是否全部选中，判断全选按钮颜色，故选择计算属性

  computed: {
    isAll: function () {
      // 全选按钮的状态位：它的值有商品列表的状态决定
      // 所有的列表商品都选中，那么全选按钮就选中
      // 只要有一个商品没选中，那么全选按钮就不选中
      let flag = true
      for (let key in this.cart) {
        // 其中一件商品
        let p = this.cart[key]
        flag = flag && p.checked
      }
      return flag
    },
  }

局部选中-效果-灰色

全部选中-效果-红色