vue3 实现全选/全不选功能

news2024/11/21 0:34:46

List item

vue3实现全选/全不选功能

实现逻辑就是全选按钮的选中与否依赖,所有的子复选框是否选中,
通过计算属性的 get()跟set()方法绑定全选按钮的值.

<template>
  <div class="container">
    <input type="checkbox" v-model="checkAll"/>全选/不全选
    <p v-for="item,index in list" :key="index">
    <input type="checkbox" v-model="item.checked"/>{{ item.label}}
    </p>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, toRefs } from 'vue';
    let state = reactive({
        list:[{label:"张无忌",value:1,checked:false},{label:"张翠山",value:2,checked:false},{label:"张三丰",value:3,checked:false}],
    })

    let {list,checkList} = toRefs(state)
    //将checkAll定义成计算属性
    let checkAll = computed({
        get(){
           let flag = list.value.map((item)=>{
                if(item.checked == false){
                    return false
                }else{
                    return true
                }
                
            })
            return !flag.includes(false)
        },
    
        set(newVal){
            if(newVal){
                 list.value.map((value,_index,_array)=>{
                    value.checked = true
                })
            }else{
                list.value.map((value,_index,_array)=>{
                    value.checked = false
                })
            }
        }
    })

</script>