Ant-design-vue中select选择器(可搜索和清除)
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 是一个对象。
更多推荐
已为社区贡献10条内容
所有评论(0)