antdv之select下拉选择框

最新推荐文章于 2024-11-29 15:21:28 发布

gyuei

最新推荐文章于 2024-11-29 15:21:28 发布

阅读量3.9k

点赞数 1

分类专栏： ant design vue

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/108887337

版权

ant design vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Vue.js应用中设置Select组件的默认空值，并确保用户选择的值能实时更新到Select框显示。通过使用v-model和allowClear属性，可以实现选中项与Select内容的同步，代码示例展示了如何绑定数据和遍历选项列表。

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

需求：
1.select框的内容默认为空
2.选中下拉框中的数值后，select框的内容等于选中的值

html部分代码如下:

<a-form-model ref="ruleForm" :model="formModel" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
	<a-form-model-item label="箱型箱类" prop="containerType">
		<a-select v-model="formModel.containerType" allowClear>
			 <a-select-option :value="item.value" v-for="(item, index) in containerTypeList" :key="index">
			   {{ item.value }}
			 </a-select-option>
		</a-select>
	</a-form-model-item>
</a-form-model>

js部分代码如下：

export default {
	data() {
		return {
			formModel:{
			containerType: ''
		},
		containerTypeList: [{ value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }]
		}
	}
}

最终效果如图:
在这里插入图片描述