好家伙，

继续完善购物车相应功能

1.如何实现全选和反全选

1.1.全选框的状态显示(父传子)

来一波合理分析:

在页面中,有三个商品中

三个商品中的第二个未选择,

我么使用一个计算属性(fullState)来遍历一遍三个商品的选择状态

遍历过程中发现第二个是false,另外两个为true

那么计算属性fullState的状态也是false了,

三个都是true,这个计算属性才是true

然后将这个值传给全选框的组件,

如果值是false

那么我看到的全选框就是灰色的

反之,如果值是true

那么全选框那个位置就是亮的

我们来添加一个计算属性来动态判断每一项的勾选状态

全选为true,

非全选为false

computed:{
    //用于全选状态的计算属性
    //动态计算出全选的状态是true还是false
    fullState(){
      return this.list.every(item=>item.goods_state)
    }
  },

在App.vue的组件调用中:

<Footer :isfull="fullState"
    @full-change="getFullState"></Footer>

随后我们将这个值传给子组件

通过props传值

Footer.vue组件代码如下:

 View Code

来看其中选择框的部分

<input type="checkbox" 
      class="custom-control-input" 
      id="cbFull" 
      :checked="isfull"
      @change="fullChange" />

由全选框中的input把这个是否全选的状态渲染出来

接口定义:

props:{
    isfull:{
      type:Boolean,
      default:true
    }
  },

至此,显示"是否全选"的功能实现了

1.2.点击全选框后,选择全部商品

      再次点击,取消全择

大概的思路分析:

我们在子组件中拿到全选框的状态(e.target.checked),

然后,我们用一个自定事件(full-change)把这个状态传给父组件,

随后用一个方法(getFullState)把每一个商品的状态改为全选框的状态

最后Goods.vue组件中渲染出来的状态,自然就是全选框的状态了

上代码,来看看如何实现

Footer.vue组件勾选框:

<input type="checkbox" 
      class="custom-control-input" 
      id="cbFull" 
      :checked="isfull"
      @change="fullChange" />

勾选框状态改变,触发方法fullChange,

methods:{
    //监听到全选状态的变化
    fullChange(e){
      this.$emit('full-change',e.target.checked)
    }
  }

App.vue的组件调用中:

<Footer :isfull="fullState"
    @full-change="getFullState"></Footer>

getFullState方法:

 getFullState(val){
      console.log('在App中拿到了全选的状态')
      this.list.forEach(item=>(item.goods_state = val))
    }

此处val的值就是前面fullChange传过来的值(e.target.checked)

将所有商品的勾选状态改为全选框的值

于是,这个功能完成了

至此,全选功能完成,
 

出处：https://www.cnblogs.com/FatTiger4399/p/16282650.html