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>
效果如下:
