Ant-design-vue中select选择器（可搜索和清除）

记录一下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 是一个对象。