vue + antd使用a-select的placeholder默认显示不生效

在Vue项目中使用Ant Design Vue的a-select组件时,发现placeholder默认提示文字未显示。问题源于组件绑定的值在初始化时必须设置为null,而非空字符串或undefined。设置modelValue为null后,a-select的placeholder能正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码:

<a-select
	show-search
	option-filter-prop="children"
	:filter-option="filterOption"
	placeholder="请选择!!!"
	v-decorator="['id', { rules: [{ required: true, message: '请选择!' }] }]"                      
>
	<a-select-option
		v-for="item in dataList"
		:key="item.id"
		:value="item.id"
	>
       {{ item.name }}
    </a-select-option>
</a-select>

如上,运行代码,其中的 placeholder="请选择!!!" 默认提示未显示。

解决:

// 编辑时的回显
showModal(record) {
	this.visible = true;
	this.editId = record.id
	this.$nextTick(function () {
		this.form.setFieldsValue({
			name: record.name,
			id: undefined, // 必须为undefined,placeholder默认显示才生效
		})
		// 请求接口
		getdataList().then(res => {
			if (res.statusCode === 200) {
				this.dataList = res.data.dataList
			}
		})
	})
},

如上,初始化时将id 设为 undefined

解决办法:

可能是antd本身的问题,a-select绑定的值初始为 " " 或为 null 都不行,初始必须设为 undefined,才显示默认提示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值