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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

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>

• 1

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

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;
      }
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55

三、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 == 2
        console.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;
      }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

四、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.checks
        this.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.checks
        this.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;
      }
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

• == 0 ? ('2') : 加了一个判断，就可实现 二级选项只有一个选中时，不可取消选中