购物车（五）02-商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反

商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反

控制商品是否全选

• 实现思路：把products中所有商品的checked属性全部修改一遍

selectAll () {
  // 实现所有商品的全部选中或者全部取消
  // 控制全选按钮的样式
  this.isAll = !this.isAll
  let products = [...this.products]
  // 修改所有的商品的选中状态
  products.forEach(item => {
    item.checked = this.isAll
  })
  this.products = products
}

实例

实现思路：点击全选按钮时，控制所有商品的选中或者取消选中

结构

<!-- 左侧CheckBox -->
<div class="total-button">
    <icon @click='toggleAll' :color="isAll?'red': '#eee'" type='success' size='18'/>全选
</div>

完整底部菜单代码 @click='toggleAll'

    <!-- 底部菜单 -->
    <div class="cart-total">
      <!-- 左侧CheckBox -->
      <div class="total-button">
        <icon @click='toggleAll' :color="isAll?'red': '#eee'" type='success' size='18'/>全选
      </div>
      <!-- 中间的价格 -->
      <div class="total-center">
        <div class="total-price">合计：
          <text class="colorRed">
            <text>￥</text>{{calcTotal}}
          </text>
        </div>
        <div class="price-tips">包含运费</div>
      </div>
      <!-- 右侧结算按钮 -->
      <div @click='toPay' class="accounts" >
        结算
      </div>
    </div>

逻辑

<script>
export default {
  data () {
    return {
      address: null,
      cart: null
    }
  },
  computed: {
    isAll: function () {
      // 全选按钮的状态位：它的值有商品列表的状态决定
      // 所有的列表商品都选中，那么全选按钮就选中
      // 只要有一个商品没选中，那么全选按钮就不选中
      let flag = true
      for (let key in this.cart) {
        // 其中一件商品
        let p = this.cart[key]
        flag = flag && p.checked
      }
      return flag
    },      
  }    
  methods: {
    toggleAll: function () {
      // 点击全选按钮控制选中与否
      // 修改所有列表商品的状态
      // isAll的状态进行取反
      // 先深拷贝一份cart，然后遍历修改状态，最后整体覆盖
      let cart = JSON.parse(JSON.stringify(this.cart))
      console.log(123)
      for (let key in cart) {
        let p = cart[key]
        p.checked = !this.isAll
      }
      this.cart = cart
    },
  }
}           

全选效果