vue单选全选

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

置顶 how to fail

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

阅读量468

点赞数 2

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/wd_nmdQGMZFJ/article/details/107714872

版权

本文介绍了在Vue中利用element-ui的el-checkbox组件实现单选全选功能的方法，通过监听框状态改变的事件来同步全选和个体的选择状态。并展示了功能实现后的效果图，以及作者作为前端新手的学习心得。

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

单选全选

一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的el-checkbox 标签,网址如下 https://element.eleme.cn/#/zh-CN/component/checkbox,使用其中的框状态改变的事件,代码如下

<template>
    <div>
       <P><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></P>
       <div v-for="item in list" :key="item.id">
           <el-checkbox v-model="item.state" @change="handle">{{item.name}}</el-checkbox>
       </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[ // 模拟后端返给我们的数据,state控制每一项单选框是否选中
            {name:'张三',id:1,state:false},
            {name:'李四',id:2,state:false},
            {name:'王五',id:3,state:false},
            ],
            checkAll: false, // 是否全选
        } 
    },
    methods:{
        handleCheckAllChange(){ // 全选框的状态发生改变时
            if(this.checkAll === true){ // 如果全选,遍历的每一项的state赋值为true
                for(let i=0;i<this.list.length;i++){
                    this.list[i].state = true
                }
            }
            else{ // 如果全不选,遍历的每一项的state赋值为false
                for(let i=0;i<this.list.length;i++){
                    this.list[i].state = false
                }
            }
        },
        handle(){ // 每一项的状态发生改变时
            let selCount = [] // 定义一个空数组,存储一会值为true的项,最后这个数组的长度与原数组长度相同时,每一项被选中,全选框自动勾上
            for(let i=0;i<this.list.length;i++){
                if(this.list[i].state === true){
                    selCount.push(this.list[i])
                }
            }
            if( selCount.length === this.list.length ){
                this.checkAll = true
            }
            else{
                this.checkAll = false
            }
        }
    }
}
</script>

效果图如下
在这里插入图片描述
初始内容均为空

勾选全选,底下三项自动选中

勾选底下三项,全选自动选中

前端小菜鸡,留下俺的微信欢迎骚扰,学习技术,哈哈,13027078691
第一次玩这个,弄得比较丑,下次再接再厉!