vue3：记录一下 vue3列表中checkbox的全选逻辑

记录一下 vue3中列表中的全选逻辑

列表中嵌入checkbox，如何实现全选？

思路：

1. 列表中checkbox绑定行数据
2. 全选checkbox绑定computed计算属性，通过getter实现全选是否被选中,setter实现切换全选时改变列表中checkbox的绑定值

实现

<template>
     <label>
         <input type="checkbox" v-model="all"/> 全选
     </label>

     <label v-for="(item,index) in data" :key="index">
         <input type="checkbox" v-model="item.check" />
         <text>{{item.name}}</text>
     </label>
</template>

<script setup>
  import { ref, computed} from "vue"

  // 全选绑定
  const all = computed({
    get(){
      return data.value.every(d=>d.check)
    },
    set(val){
      const arr = data.value.map(d=>({...d,check:val}))
      data.value = arr;
    }
  })
    
  // 列表数据
  const data = ref([
    {
      check: false,
      name:'香蕉'
    },
    {
      check: false,
      name:'苹果'
    },
    {
      check: true,
      name:'梨'
    },
    {
      check: false,
      name:'葡萄'
    },
  ])
</script>