前端学习日记----单选框，全选框功能

实现单选框功能---

监听事件，同时用：model-value绑定数据里对应的selected属性值，用change事件进行监听，因为会默认传递change里的值，但因为要让我们具体知道是那个商品数据所以得再传递一个参数过去，因此需要用到回调函数，@change="(selected)=>{singleCheck(i,selected)}"此处的selected是默认传递过去的，主要是为了执行singleCheck这一个函数，

singleCheck在这个函数内调用能够编辑到pinia里的数据里的函数，将对应的id和seleced传过去，然后进行筛选赋值

<el-checkbox :model-value="i.selected" @change="(selected)=>{singleCheck(i,selected)}" />

这里为什么要写成这样，是因为change自带的只能传递发生改变的true和false一个参数，而上方还有

const singleCheck=(i,selected)=>{

  cartStore.singCheck(i.skuId,selected)

}

这一个代码，需要用到2个参数，所以在这里需要用到回调函数进而来实现传递两个参数

问为什么不v-model直接双向绑定，因为修改仓库数据要遵循单向数据流，是可以正常修改，但是不规范

全选框功能：

思路：点击全选框，绑定change事件，传递全选框的值作为参数，然后在调用pinia里的全选函数，全选函数（遍历使全部的数据条里的selected的值===全选框的值）

同时在pinia里还得设置计算属性isAll，这个函数功能是通过every数组方法来判断所有的数据条的selected值是否为true  满足条件则返回true 否则false. 随后在让checkBox的值通过:model-value与其进行绑定即可.

代码如下：

const allCheck=(selected)=>{

cartStore.allCheck(selected)

}

<el-checkbox :model-value="cartStore.isAll" @change="allCheck"/>

  //全选功能

  const allCheck = (selected) => {

    cartList.value.forEach(item => item.selected = selected)

  }

//是否全选功能

  const isAll = (computed(() => {

    return cartList.value.every(item => item.selected === true)

  }))

总结：单选全勾时，才全选勾 因此需要创建一个计算属性isAll来遍历判断单选是不是全都勾了，同时将isAll与checkBox的值进行绑定    二：全选勾，绑定change事件，然后将其状态作为参数传递，随后foreach依次遍历赋值，让单选框的状态与全选框的状态一样

//计算已选商品的总数量

  const selectedCount = computed(() => {

    return cartList.value.filter(item => item.selected === true).reduce((sum, item) => { return item.count + sum }, 0)

  })

  //计算已选商品的总价钱

  const selectedPrice = computed(() => {

    return cartList.value.filter(item => item.selected === true).reduce((sum, item) => { return item.price * item.count + sum }, 0)

  })

总之就 先过滤（filter）然后再计算（reduce）