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的参数期望值也是一个数组。