ElementUI：Checkbox实现单选，嵌套多选

官网地址：ElementUI-Checkbox

一、Checkbox 基础介绍

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
   
    data() {
   
      return {
   
        checked: true
      };
    }
  };
</script>

v-model="checked" v-model 为 true 的时候，数据为勾选状态

• 可通过改变 v-model 的值控制数据的勾选状态

 <template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>
<script>
  export default {
   
    data () {
   
      return {
   
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

el-checkbox-group 元素能把多个 checkbox 管理为一组，用 v-model 绑定 Array 类型的变量，变量中的数据即为勾选状态。
label="复选框 A" groop 下 checkbox 的 label 即为此 checkbox 的值，label 值如果存在在 v-model 中，则此数据为勾选状态

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

indeterminate 与 v-model 共同控制 checkbox 的状态，选中、半选中、未选中，一般用于全选按钮

• indeterminate 和 v-model 都为 false ，则未选中
• indeterminate 为 false，v-model 为true ，则选中
• indeterminate 为 true，v-model 为 false 或者 true，则半选中

二、Checkbox 实现单选，嵌套多选（第一版：所有选项不可取消选中）

效果图

 <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox v-model="checked1" :indeterminate="isIndeterminate" @change="checkChange(3)">智能筛选</el-checkbox>
            <el-checkbox-group v-model="checks" style="padding-left: 20px">
              <div>
              <el-checkbox label="2" @change="checkChange(2)">真实火警</el-checkbox>
              </div>
              <div>
              <el