Ant Design of Vue select框获取key和name的问题
作者：浩先生呀
这篇文章主要介绍了Ant Design of Vue select框获取key和name的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Ant Design of Vue select框获取key和name
加入label-in-value这个属性
<a-form-item label="分类">
<a-select
placeholder="请选择分类"
style="width: 100%"
label-in-value
v-decorator="['knowledgeunit', { rules: [{ required: true, message: '请选择分类' }] }]"
>
<a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
{{ calssitem.Name }}
</a-select-option>
</a-select>
</a-form-item>获取到的value 就会变成 {key: 1, lable: '名字'} 的形式
获取值的时候可以这样获取
this.addResourceForm.validateFields((err, values) => {
if (err && this.newChange.length > 0) {
return
}
const saveObj = {}
saveObj.knowledgeunit = values.knowledgeunit.key // 获取的值
saveObj.source = values.knowledgeunit.label // 获取的名称
})我的记录
还有一种方法
你如果想获取怎个对象，怎么获取呢？
<a-form-item label="分类">
<a-select
placeholder="请选择分类"
style="width: 100%"
@change="onChange"
v-decorator="['knowledgeunit', { rules: [{ required: true, message: '请选择分类' }] }]"
>
<a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
{{ calssitem.Name }}
</a-select-option>
</a-select>
</a-form-item>加一个onChange方法，根据下标获取对应的对象
onChange (item) {
const obj = this.list[item]
console.log(obj)
}Ant Design Vue使用select出现的问题
1.select下拉菜单滚动条滚动后,自动弹回到顶部
解决方法：
a-select-option 使用v-for渲染时，key值不能重复或者为null
2.下拉列表在局部滚动时不跟随,与select框分离
解决方法：
<a-select
:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode || document.body;}"
>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。