Ask about the status of element checkbox multi-selection indeterminate

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>
Sep.09,2021

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

this is an instance of the official website
, which has two properties that control the selection of this checkbox:indeterminate and checkAll.

When

indeterminate is false,checkAll and false, the status is unchecked. When
indeterminate is true,checkAll and false, the status is semi-selected. When
indeterminate is false,checkAll and true, the status is all selected.

change the full box state to unchecked, and you should change both indeterminate and checkAll, to false.

Menu