应一个小姐姐的要求写一下实现复选框全选功能,这里推荐先看下elementui文档,里面属性写的明明白白。
首先上代码:
html:
<div class="singleSearch"><span class="searchSpan">模型类型:</span> <el-checkbox v-model="checkAll" label="全部" :indeterminate="isIndeterminateModel" @change="handleCheckAllChange" /> <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的长度,如果小于说明没选全,等于说明全选