账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    求问element checkbox 多选indeterminate的状态问题
    25
    0

    问题:对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>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 几经风月 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部