官网地址：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-checkbox label="1" @change="checkChange(1)">超时未处理</el-checkbox></div></el-checkbox-group></el-dropdown-item><el-dropdown-item><el-checkbox v-model="checked2" @change="checkChange(0)">不接收子单位报警</el-checkbox></el-dropdown-item><el-dropdown-item><el-checkbox v-model="checked3" @change="checkChange(4)">全部接收</el-checkbox></el-dropdown-item><el-dropdown-item divided><span style="display: block" @click="handleSubmit">完成</span></el-dropdown-item></el-dropdown-menu></el-dropdown>
export default {data() {return {checked1:false,checked2:false,checked3:false,isIndeterminate: false,checks:[]};},methods: {checkChange(param){switch(param){case 3:this.checked1=true;this.checked2=false;this.checked3=false;this.checks= ['1','2'];this.isIndeterminate = false;this.alarmType = param;break;case 0:this.checked1=false;this.checked2=true;this.checked3=false;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;case 4:this.checked1=false;this.checked2=false;this.checked3=true;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;case 2:this.checked2=false;this.checked3=false;this.checks.push('2')this.checked1 = this.checks.includes('1') && this.checks.includes('2');this.isIndeterminate = !this.checked1;this.alarmType = param;break;case 1:this.checked2=false;this.checked3=false;this.checks.push('1');this.checked1 = this.checks.includes('1') && this.checks.includes('2');this.isIndeterminate = !this.checked1;this.alarmType = param;break;}},
三、Checkbox 实现单选，嵌套多选（第二版：所有选项都可取消选中）
效果图
checkChange(param){switch(param){case 0:this.checked1=false;this.checked3=false;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;case 1:this.checked2=false;this.checked3=false;this.checked1 = this.checks.includes('1') && this.checks.includes('2');this.isIndeterminate = this.checks.length == 1 ? true : false;this.alarmType = param;break;case 2:this.checked2=false;this.checked3=false;console.log(this.checks);this.checked1 = this.checks.length == 2console.log(this.checked1);this.isIndeterminate = this.checks.length == 1 ? true : false;this.alarmType = param;break;case 3:this.checked2=false;this.checked3=false;console.log(this.checks);this.checks= (this.checks.includes('1') && this.checks.includes('2')) ? [] : ['1', '2'];console.log(this.checks);this.checked1= this.checks.length ? true : false;this.isIndeterminate = this.checks.length ? false : false;this.alarmType = param;break;case 4:this.checked1=false;this.checked2=false;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;}
四、Checkbox 实现单选，嵌套多选（第三版：所有一级选项不可取消选中，二级选项可取消选中，但当二级选项只有一个选中时，不可取消选中）
效果图
checkChange(param){switch(param){case 0:this.checked1=false;this.checked2=true;this.checked3=false;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;case 1:this.checked2=false;this.checked3=false;this.checked1 = this.checks.includes('1') && this.checks.includes('2');this.checks.length == 0 ? this.checks.push('1') : this.checksthis.isIndeterminate = !this.checked1;this.alarmType = param;break;case 2:this.checked2=false;this.checked3=false;this.checked1 = this.checks.includes('1') && this.checks.includes('2');this.checks.length == 0 ? this.checks.push('2') : this.checksthis.isIndeterminate = !this.checked1;this.alarmType = param;break;case 3:this.checked2=false;this.checked3=false;this.checks = ['1', '2']this.checked1=this.checks.includes('1') && this.checks.includes('2')this.isIndeterminate = this.checks.length ? false : false;this.alarmType = param;break;case 4:this.checked1=false;this.checked2=false;this.checked3=true;this.checks= [];this.isIndeterminate = false;this.alarmType = param;break;}},
this.checks.length == 0 ? this.checks.push('2') : this.checks加了一个判断，就可实现二级选项只有一个选中时，不可取消选中
