problem: unable to clear the full box for indeterminate = false.
indeterminate sets indeterminate status and is only responsible for style control boolean-false
ask the boss to explain the three states of indeterminate: unchecked (empty), partially selected (minus sign), and all checked (check box). My understanding is that when true is partially selected (minus sign), when it is false, there are two situations, which may be judged according to the list below. All the selections below are all selected (check box), and no one is selected is unchecked (empty).
now I have a list, which is selected to refresh the contents of the background data list after batch operation, but select all the ones that are not empty or all selected (check box). The value selected in the console list is an empty array , which cannot be made unchecked (empty) for this.indeterminate = false, but this.indeterminate = true can be partially selected (minus sign).
post a section of the source code that the boss is looking for, but the skill is not good enough, and it is a bit difficult to read.
<!-- 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;
},
// groupcheckbox 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-grouparray
label: {},
// indeterminate
indeterminate: Boolean,
//
disabled: Boolean,
//
checked: Boolean,
// name
name: String,
//
trueLabel: [String, Number],
//
falseLabel: [String, Number],
id: String, /* indeterminatecontrolscheckboxid*/
controls: String, /* indeterminatecontrolscheckboxid*/
//
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>