官网地址: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
加了一个判断,就可实现二级选项只有一个选中时,不可取消选中