Ant Design of Vue select框获取key和name的问题

 更新时间:2022年06月01日 09:53:14   作者:浩先生呀  
这篇文章主要介绍了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;}" 
>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 代码详解Vuejs响应式原理

    代码详解Vuejs响应式原理

    这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识,有兴趣的朋友们参考学习下吧。
    2017-12-12
  • Vue自定义加水波纹效果指令实例代码

    Vue自定义加水波纹效果指令实例代码

    这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 关于vue中的ajax请求和axios包问题

    关于vue中的ajax请求和axios包问题

    大家在vue中,经常会用到数据请求问题,常用的有vue-resourse、axios ,今天小编给大家介绍下axios的post请求 ,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-04-04
  • VUE重点问题总结

    VUE重点问题总结

    本篇内容给大家总结了VUE的重要难点,并把代码做了详细分享,有兴趣的朋友参考学习下。
    2018-03-03
  • vue 微信分享回调iOS和安卓回调出现错误的解决

    vue 微信分享回调iOS和安卓回调出现错误的解决

    这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue中的@blur事件 当元素失去焦点时所触发的事件问题

    Vue中的@blur事件 当元素失去焦点时所触发的事件问题

    这篇文章主要介绍了Vue中的@blur事件 当元素失去焦点时所触发的事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue filter格式化时间戳时间成标准日期格式的方法

    Vue filter格式化时间戳时间成标准日期格式的方法

    今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-editor-bridge报错的解决方案

    vue-editor-bridge报错的解决方案

    这篇文章主要介绍了vue-editor-bridge报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现移动端适方案的完整步骤

    vue实现移动端适方案的完整步骤

    现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue中el-table合并列的具体实现

    vue中el-table合并列的具体实现

    本文主要介绍了vue中el-table合并列的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论