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;}" >
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。