elementui checkbox复选框实现层级联动
使用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复选框实现层级联动的更多相关文章
- vue基于element-ui的三级CheckBox复选框
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
- elementUI 学习入门之 checkbox 复选框
CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- php怎么获取checkbox复选框的内容?
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
随机推荐
- zookeeper在生产环境中的配置(zookeeper3.6)
一,zookeeper中日志的配置 1,快照文件snapshot的目录: dataDir=/data/zookeeper/data 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这 ...
- 记一次JFormDesigner破解问题idea版本号2020.2.2
第一步: 首先idea 2020.2.2下载插件JFormDesigner插件(软件版本7.0.1); 第二步:下载注册机(以上两步软件打包 在百度云) 第三步:点击 redister注册 第四步:打 ...
- poj1655 Balancing Act (dp? dfs?)
Balancing Act Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14247 Accepted: 6026 De ...
- 分布式文件存储数据库 MongoDB
MongoDB 简介 Mongo 并非芒果(Mango)的意思,而是源于 Humongous(巨大的:庞大的)一词. MongoDB 是一个基于分布式文件存储的 NoSQL 数据库.由 C++ 语言编 ...
- 图解git,用手绘图带你理解git中分支的原理和应用
大家好,今天我们来聊git当中一个非常非常重要的特性,就是branch. git branch可以说是git当中最重要的概念了,甚至没有之一.因为git最重要的使用场景就是协同开发,大家一起在一个项目 ...
- Glide缓存图片
是用Glide加载网络图片可以自动缓存到磁盘 添加依赖: implementation 'com.github.bumptech.glide:glide:4.9.0' implementation ' ...
- 联赛模拟测试24 D. 你相信引力吗 单调栈
题目描述 分析 因为跨过最大值的区间一定是合法的,所以我们人为地把最大值放在最左边 我们要统计的就是在最大值右边单调不降的序列,可以用单调栈维护 需要特殊处理相同的情况 代码 #include< ...
- Pytest 系列(25)- 标记用例级别 @allure.
如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 平时写测试用例也会划分优先级 ...
- redis client原理分析
代码库地址:https://github.com/garyburd/redigo 1:连接池 2:发送命令 3:解析结果 1:连接池 连接池结构体如下: type Pool struct { // D ...
- 从创建进程到进入main函数,发生了什么?
前几天,读者群里有小伙伴提问:从进程创建后,到底是怎么进入我写的main函数的? 今天这篇文章就来聊聊这个话题. 首先先划定一下这个问题的讨论范围:C/C++语言 这篇文章主要讨论的是操作系统层面上对 ...