vue单选全选

单选全选

一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了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
第一次玩这个,弄得比较丑,下次再接再厉!

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值