Skip to content

antd-design-vue的select控件,mode为default情况下,当且仅当value值为undefined或者空数组时,才显示placeholder #985

@realgkl

Description

@realgkl

因为select支持多选,所以传入值value会被state._value接收并转换成数组。
调用的toArray方法如下:

export function toArray(value) {
  let ret = value;
  if (value === undefined) {
    ret = [];
  } else if (!Array.isArray(value)) {
    ret = [value];
  }
  return ret;
}

如果非undefined和空数组,则会被强制转换成数组,并且非空。
在vc-select控件的getPlaceholderElement函数中,isCombobox判断不正确导致hidden为true,
isCombobox是select控件的props传入的,而select控件的判断是根据mode判断,mode为default,就不是combobox。

isCombobox() {
      const { mode } = this;
      return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
    },
getPlaceholderElement() {
      const { $props: props, $data: state } = this;
      let hidden = false;
      if (state._inputValue) {
        hidden = true;
      }
      const value = state._value;
      if (value.length) {
        hidden = true;
      }
      if (isCombobox(props) && value.length === 1 && (state._value && !state._value[0])) {
        hidden = false;
      }
      const placeholder = props.placeholder;
      if (placeholder) {
        const p = {
          on: {
            mousedown: preventDefaultEvent,
            click: this.onPlaceholderClick,
          },
          attrs: UNSELECTABLE_ATTRIBUTE,
          style: {
            display: hidden ? 'none' : 'block',
            ...UNSELECTABLE_STYLE,
          },
          class: `${props.prefixCls}-selection__placeholder`,
        };
        return <div {...p}>{placeholder}</div>;
      }
      return null;
    },

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions