记录一下Ant-design-vue知识点——select选择器

经常用,记录一下。

				<a-form-item label="" style="width: 200px">
                    <a-select show-search @change="handleChange" v-model:value="where.projectId" placeholder="请选择站点" style="" allow-clear>
                    <a-select-option v-for="(item, index) in shopList" :key="index" :value="item.projectId"
                        >{{ item.projectName }}
                    </a-select-option>
                    </a-select>
                </a-form-item>
//shopList是数组集合
//allow-clear是允许清除
//show-search是允许搜索
加上label-in-value   此时 value 是一个对象。
//:value="item.projectId"  选中后绑定的ID值
//{{ item.projectName }}  选中后要展示的值
//@change="handleChange"   数据发生改变时,change事件
//v-model:value="where.projectId"   需要用到的id

效果展示

在这里插入图片描述

补充:

label-in-value
在这里插入图片描述

默认情况下 onChange 里只能拿到 value,如果需要拿到选中的节点文本 label,可以使用 labelInValue 属性。 选中项的 label 会被包装到 value 中传递给 onChange 等函数,此时 value 是一个对象。
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐