使用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>