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的长度,如果小于说明没选全,等于说明全选

目录
打赏
0
0
0
0
1
分享
相关文章
vue-element-admin提交表单数据到后端
vue-element-admin提交表单数据到后端
191 0
vue3父子传值实现弹框功能
vue3父子传值实现弹框功能
|
7月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1601 0
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
2201 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
elementui里checkbox全选操作
elementui里checkbox全选操作
269 0
|
9月前
|
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
135 1
Waiting for another flutter command to release the startup lock... 异常解决
平时我们在开发flutter过程中,在执行`flutter packages get`命令之后,如果运气不好的,命令没有执行成功的话,我们就会遇到这个错误提示: ``` Waiting for another flutter command to release the startup lock... ```
ThinkPHP6的控制器定义及控制器初使用
本文介绍了ThinkPHP6框架中控制器的定义和初步使用方法。内容包括控制器的文件位置、命名规范、如何改变控制器目录名、单应用模式下的项目访问路径,以及控制器类文件的实际位置和访问URL的示例。文章还提到了ThinkPHP的控制器类可以灵活定义,无需继承任何基础类库,但建议继承一个基础的控制器类以方便扩展。控制器名不区分大小写,并且支持驼峰命名转下划线的方式。
ThinkPHP6的控制器定义及控制器初使用

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等