vue 多选框全选

最新推荐文章于 2025-03-14 15:15:59 发布

曾经沧海海

最新推荐文章于 2025-03-14 15:15:59 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue 多选框全选 CheckboxGroup vue全选交互 vue Checkbox全选

本文链接：https://blog.youkuaiyun.com/m0_37684037/article/details/103858552

版权

这篇博客介绍了如何在Vue项目中实现多选框的全选功能，特别是在CheckboxGroup组件中实现全选和反选的交互逻辑。文章提到了在页面加载时，通过在created或mounted生命周期钩子中设置this.checkAllGroup的值，可以控制多选框的初始选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        // 全选按钮的部分
        <Checkbox
            // value来判断是否点亮全选框
            :value="checkAll"
            // 点击后的一系列变化，参数赋值
            @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    // 单个选中的过程，与全选框的交互
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {
        data () {
            return {
                checkAll: false,
                // 初始默认有选中的对象
                checkAllGroup: ['香蕉', '西瓜']
            }