element checkbox复选框实现全选功能

简介: element checkbox复选框实现全选功能

应一个小姐姐的要求写一下实现复选框全选功能,这里推荐先看下elementui文档,里面属性写的明明白白。

首先上代码:

html:

 <div class="singleSearch"><span class="searchSpan">模型类型:</span>
            <el-checkbox v-model="checkAll" label="全部" :indeterminate="isIndeterminateModel" @change="handleCheckAllChange" />&nbsp;&nbsp;&nbsp;
            <el-checkbox-group v-model="modelType" @change="handleCheckedmodelChange">
              <el-checkbox v-for="model in allmodelType" :key="model" :label="model" />
            </el-checkbox-group>
          </div>

注意比较重要的属性(名字可以根据自己需要改变)

checkAll:值为布尔类型,实现全选按钮的状态

isIndeterminatemodel:当复选框其余按钮全部选中时,这个值变为true,全选按钮选中,反之全选按钮不选中

allmodelType是我自己的数据,遍历显示出来数据

modelType:用来记录你选中的哪个复选框

效果图:

这里我们先看模型类型这一个demo

点击其余一个按钮:(注意这个全选按钮是没选种状态,只是加了一个样式,看下边选中是什么样子的)

点击全选:

js实现:

在data里双向数据绑定写上:

​      modelType:'',
      checkAll: false,
      isIndeterminateModel: false,
      allmodelType: ['过程模型', '算法模型', '统计模型', '仿真模型', '分析模型', 'ZZ规则模型', 'BZ规则模型', '其他'],

在methods方法里写:

 handleCheckAllChange(val) {
      this.modelType = val ? this.allmodelType : []
      this.isIndeterminateModel = false
    },
    handleCheckedmodelChange(value) {
      const modelLength = value.length
      this.checkAll = modelLength === this.allmodelType.length
      this.isIndeterminateModel = modelLength > 0 && modelLength < this.allmodelType.length
    },

思路就是判断数组长度是否等于你allmodelType的长度,如果小于说明没选全,等于说明全选

相关文章
|
6月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
431 0
全选或者单选checkbox的值动态添加到div
全选或者单选checkbox的值动态添加到div
58 0
复选框checkbox实现自定义样式
复选框checkbox实现自定义样式
70 1
layui的复选框怎么设置只能单选
layui的复选框怎么设置只能单选
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
49zTree - 带 checkbox 的多选下拉菜单
49zTree - 带 checkbox 的多选下拉菜单
43 0
16zTree - Checkbox 勾选操作
16zTree - Checkbox 勾选操作
55 0
element-plus 下拉框实现全选功能
element-plus 下拉框实现全选功能
1468 0
|
JavaScript 前端开发
layui复选框checkbox全选和获取值的解决方案
layui复选框checkbox全选和获取值的解决方案
1133 0
自定义复选框CheckBox的样式
自定义复选框CheckBox的样式
125 0