1.3.10
vue 3.4.1
https://github.com/vueComponent/ant-design-vue.git
因为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;
},
v-model绑定的value值,undefined、null、空字符串("")应该都能显示placeholder
v-model绑定的value值,仅当value值为undefined或者空数组时,才显示placeholder
修改select控件的isCombobox方法应该就能解决这个问题
同样,正在为此问题困扰,搞不懂这么简单的问题官方为什么一直不给解决,正在考虑是不是要换回elementUI了。
空字符串是有意义的,可以认为是有效的选项,
另外我想 undefined 足够满足所有场景
@tangjinzhou The problem with using undefined instead of null is that it cannot be returned from the server, as it's not a valid type in other languages. It is expected that when the value is null the placeholder will be shown, otherwise null values must be converted to undefined.
At the least, another prop should be added, something like :placeholderValues=[undefined, null, ''] that the user can override.
I think null should be also considered. Since the response from the api returns null, I am manually setting the value from null to undefined. It is a bit annoying to do that. Hope you guys can listen to the community for the changes
Use undefined, Vue will export a warn: Property or method "xxx" is not defined on the instance but referenced during render
使用null不行,API返回带的是null,还要手动去转成undefined,麻烦
Most helpful comment
@tangjinzhou The problem with using
undefinedinstead ofnullis that it cannot be returned from the server, as it's not a valid type in other languages. It is expected that when the value isnulltheplaceholderwill be shown, otherwisenullvalues must be converted toundefined.At the least, another
propshould be added, something like:placeholderValues=[undefined, null, '']that the user can override.