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;}" 
>

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

相关文章

  • vue下载excel的实现代码后台用post方法

    vue下载excel的实现代码后台用post方法

    这篇文章主要介绍了vue下载excel的实现代码,后台用post方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • Vue3中解决组件间css层级问题的最佳实践

    Vue3中解决组件间css层级问题的最佳实践

    <Teleport> 是 Vue 3 中引入的一个内置组件,用于将组件的内容渲染到 DOM 中的指定位置,而不受组件层级结构的限制,本文给大家介绍了Vue3使用Teleport解决组件间css层级问题的最佳实践,需要的朋友可以参考下
    2025-02-02
  • Vue结合ElementUI上传Base64编码后的图片实例

    Vue结合ElementUI上传Base64编码后的图片实例

    这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 浅谈vue.js导入css库(elementUi)的方法

    浅谈vue.js导入css库(elementUi)的方法

    下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 解析vue3的ref,reactive的使用和原理

    解析vue3的ref,reactive的使用和原理

    这篇文章主要介绍了vue3的ref,reactive的使用和原理解析,分析了 reactive 的实现,以及 reactive api 返回的 proxy 代理对象使用的 handlers 陷阱,并且对陷阱中我们最常用的 get 和 set 的源码进行分析,需要的朋友可以参考下
    2022-09-09
  • Vue.js结合SortableJS实现树形数据拖拽

    Vue.js结合SortableJS实现树形数据拖拽

    本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue完整版和runtime版的区别详解

    Vue完整版和runtime版的区别详解

    这篇文章主要为大家介绍了Vue完整版和runtime版的区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Vue中的性能优化方案

    Vue中的性能优化方案

    本文主要介绍了Vue中的性能优化方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue 的双向绑定原理与用法揭秘

    Vue 的双向绑定原理与用法揭秘

    这篇文章主要介绍了Vue 的双向绑定原理与用法,结合实例形式总结分析了Vue 的双向绑定基本原理、功能、用法及注意事项,需要的朋友可以参考下
    2020-05-05
  • vue router 通过路由来实现切换头部标题功能

    vue router 通过路由来实现切换头部标题功能

    在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口。这篇文章主要介绍了vue-router 通过路由来实现切换头部标题 ,需要的朋友可以参考下
    2019-04-04

最新评论