使用elementui 实现复选框的层级联动,可能我的表述不准确,先上一个效果图。



实际开发中可能遇到这样的场景,当选择高一层级的复选框时它包含的低级的复选框就不需要再勾选,需要默认选中并且禁止选用。

下面贴一下代码,欢迎各位给出更好的意见

<template>
<div class="test-container">
<el-checkbox-group v-model="checkBoxVal" @change="checkBoxChange">
<el-checkbox label="0" :disabled="checkboxList[0]">分数可见</el-checkbox>
<el-checkbox label="1" :disabled="checkboxList[1]">对错可见</el-checkbox>
<el-checkbox label="2" :disabled="checkboxList[2]">解析可见</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkBoxVal: [],
checkboxList: []
}
},
methods: {
checkBoxChange(val) {
var max = Math.max.apply(null, val)
var arr = []
for (let i = 0; i <= max; i++) {
if (i !== max) {
this.checkboxList[i] = true
} else {
this.checkboxList[i] = false
}
arr.push(String(i))
}
this.checkBoxVal = Array.from(new Set(arr))
},
}
}
</script> <style lang='less' scoped>
.test-container {
height: calc(90vh);
}
</style>

需要注意elementui的@change="checkBoxChange"传递的参数val是一个数组,Math.max.apply的参数期望值也是一个数组。

elementui checkbox复选框实现层级联动的更多相关文章

  1. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

  2. elementUI 学习入门之 checkbox 复选框

    CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...

  3. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

  4. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. php怎么获取checkbox复选框的内容?

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...

  7. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  8. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

  9. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. zookeeper在生产环境中的配置(zookeeper3.6)

    一,zookeeper中日志的配置 1,快照文件snapshot的目录: dataDir=/data/zookeeper/data 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这 ...

  2. 记一次JFormDesigner破解问题idea版本号2020.2.2

    第一步: 首先idea 2020.2.2下载插件JFormDesigner插件(软件版本7.0.1); 第二步:下载注册机(以上两步软件打包 在百度云) 第三步:点击 redister注册 第四步:打 ...

  3. poj1655 Balancing Act (dp? dfs?)

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14247   Accepted: 6026 De ...

  4. 分布式文件存储数据库 MongoDB

    MongoDB 简介 Mongo 并非芒果(Mango)的意思,而是源于 Humongous(巨大的:庞大的)一词. MongoDB 是一个基于分布式文件存储的 NoSQL 数据库.由 C++ 语言编 ...

  5. 图解git,用手绘图带你理解git中分支的原理和应用

    大家好,今天我们来聊git当中一个非常非常重要的特性,就是branch. git branch可以说是git当中最重要的概念了,甚至没有之一.因为git最重要的使用场景就是协同开发,大家一起在一个项目 ...

  6. Glide缓存图片

    是用Glide加载网络图片可以自动缓存到磁盘 添加依赖: implementation 'com.github.bumptech.glide:glide:4.9.0' implementation ' ...

  7. 联赛模拟测试24 D. 你相信引力吗 单调栈

    题目描述 分析 因为跨过最大值的区间一定是合法的,所以我们人为地把最大值放在最左边 我们要统计的就是在最大值右边单调不降的序列,可以用单调栈维护 需要特殊处理相同的情况 代码 #include< ...

  8. Pytest 系列(25)- 标记用例级别 @allure.

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 平时写测试用例也会划分优先级 ...

  9. redis client原理分析

    代码库地址:https://github.com/garyburd/redigo 1:连接池 2:发送命令 3:解析结果 1:连接池 连接池结构体如下: type Pool struct { // D ...

  10. 从创建进程到进入main函数,发生了什么?

    前几天,读者群里有小伙伴提问:从进程创建后,到底是怎么进入我写的main函数的? 今天这篇文章就来聊聊这个话题. 首先先划定一下这个问题的讨论范围:C/C++语言 这篇文章主要讨论的是操作系统层面上对 ...