极客观点
项目管理
HarmonyOS
问题：对indeterminate = false无法清空全选框。
indeterminate 设置 indeterminate 状态，只负责样式控制 boolean — false
求大佬解释一下indeterminate的三种状态，未选中（清空），部分选中（减号），全选中（对勾），我的理解是为true的时候是部分选中（减号）的状态，为false的时候有两种情况，可能是根据下面的列表选择的来进行判断，下面全选就是全选中（对勾）状态，没有一个被选中就是未选中（清空）状态。
现在我有一个列表，全选中进行批量操作之后请求后台数据列表内容刷新，但是选择全部的那个没有清空还是全选中状态（对勾），console列表选中的值是空数组，对this.indeterminate = false无法让它变成未选中（清空）状态，但是this.indeterminate = true可以变成部分选中（减号）状态。
贴一段大佬找的源码，功力还不行，读起来有点费劲...
<!-- packages/button/src/checkbox.vue -->
<template>
<label
class="el-checkbox"
:class="[
border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
{ 'is-disabled': isDisabled },
{ 'is-bordered': border },
{ 'is-checked': isChecked }
]"
role="checkbox"
:aria-checked="indeterminate ? 'mixed': isChecked"
:aria-disabled="isDisabled"
:id="id"
>
<!-- checkbox -->
<span class="el-checkbox__input"
:class="{
'is-disabled': isDisabled,
'is-checked': isChecked,
'is-indeterminate': indeterminate,
'is-focus': focus
}"
aria-checked="mixed"
>
<span class="el-checkbox__inner"></span>
<!-- 如果有 true-value 或者 false-value -->
<input
v-if="trueLabel || falseLabel"
class="el-checkbox__original"
type="checkbox"
:name="name"
:disabled="isDisabled"
:true-value="trueLabel"
:false-value="falseLabel"
v-model="model"
@change="handleChange"
@focus="focus = true"
@blur="focus = false">
<input
v-else
class="el-checkbox__original"
type="checkbox"
:disabled="isDisabled"
:value="label"
:name="name"
v-model="model"
@change="handleChange"
@focus="focus = true"
@blur="focus = false">
</span>
<!-- 文本内容 -->
<span class="el-checkbox__label" v-if="$slots.default || label">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
</label>
</template>
<script>
import Emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElCheckbox',
// 混合 Emitter
mixins: [Emitter],
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
componentName: 'ElCheckbox',
data() {
return {
// checkbox model
selfModel: false,
// 焦点
focus: false,
// 超过限制？
isLimitExceeded: false
};
},
computed: {
model: {
// 获取model值
get() {
return this.isGroup
? this.store : this.value !== undefined
? this.value : this.selfModel;
},
// 设置 selfModel
set(val) {
// checkbox group 的set逻辑处理
if (this.isGroup) {
// 处理 isLimitExceeded
this.isLimitExceeded = false;
(this._checkboxGroup.min !== undefined &&
val.length < this._checkboxGroup.min &&
(this.isLimitExceeded = true));
(this._checkboxGroup.max !== undefined &&
val.length > this._checkboxGroup.max &&
(this.isLimitExceeded = true));
// 触发 ElCheckboxGroup 的 input 事件
this.isLimitExceeded === false &&
this.dispatch('ElCheckboxGroup', 'input', [val]);
} else {
// 触发当前组件 input 事件
this.$emit('input', val);
// 赋值
this.selfModel = val;
}
}
},
// 是否选中
isChecked() {
if ({}.toString.call(this.model) === '[object Boolean]') {
return this.model;
} else if (Array.isArray(this.model)) {
return this.model.indexOf(this.label) > -1;
} else if (this.model !== null && this.model !== undefined) {
return this.model === this.trueLabel;
}
},
// 是否为按钮组
isGroup() {
let parent = this.$parent;
while (parent) {
if (parent.$options.componentName !== 'ElCheckboxGroup') {
parent = parent.$parent;
} else {
this._checkboxGroup = parent;
return true;
}
}
return false;
},
// 判断 group，checkbox 的 value 获取
store() {
return this._checkboxGroup ? this._checkboxGroup.value : this.value;
},
// 是否禁用
isDisabled() {
return this.isGroup
? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
: this.disabled || (this.elForm || {}).disabled;
},
// elFormItem 的尺寸
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
// checkbox 尺寸，同样需要有边框才有效
checkboxSize() {
const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
return this.isGroup
? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
: temCheckboxSize;
}
},
props: {
// value值
value: {},
// 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
label: {},
// 设置 indeterminate 状态，只负责样式控制
indeterminate: Boolean,
// 是否禁用
disabled: Boolean,
// 当前是否勾选
checked: Boolean,
// 原生 name 属性
name: String,
// 选中时的值
trueLabel: [String, Number],
// 没有选中时的值
falseLabel: [String, Number],
id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
// 是否显示边框
border: Boolean,
// Checkbox 的尺寸，仅在 border 为真时有效
size: String
},
methods: {
// 添加数据到model
addToStore() {
if (
Array.isArray(this.model) &&
this.model.indexOf(this.label) === -1
) {
this.model.push(this.label);
} else {
this.model = this.trueLabel || true;
}
},
// 处理 @change 事件，如果是 group 要处理 group 的 change 事件。
handleChange(ev) {
if (this.isLimitExceeded) return;
let value;
if (ev.target.checked) {
value = this.trueLabel === undefined ? true : this.trueLabel;
} else {
value = this.falseLabel === undefined ? false : this.falseLabel;
}
this.$emit('change', value, ev);
this.$nextTick(() => {
if (this.isGroup) {
this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
}
});
}
},
created() {
// 如果 checked 为 true，执行 addToStore 方法
this.checked && this.addToStore();
},
mounted() { // 为indeterminate元素 添加aria-controls 属性
if (this.indeterminate) {
this.$el.setAttribute('aria-controls', this.controls);
}
}
};
</script>
这是官网的实例
其中有两个属性来控制全选这个checkbox：indeterminate和checkAll。
indeterminate为false，checkAll为false的时候，状态为未选中。
indeterminate为true，checkAll为false的时候，状态为半选中。
indeterminate为false，checkAll为true的时候，状态为全选中。
把全选框状态改为未选中状态，应该修改indeterminate和checkAll，均为false。