<span>elementui checkbox复选框实现层级联动</span>
使用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的参数期望值也是一个数组。