Ant Design of Vue select框获取key 和name

最新推荐文章于 2025-03-27 14:50:58 发布

浩先生呀

最新推荐文章于 2025-03-27 14:50:58 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_38623189/article/details/119648633

版权

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

Ant Design

2 篇文章

订阅专栏

本文介绍了在Vue项目中使用Ant Design的Select组件如何结合label-in-value属性来获取选中项的key和name。通过设置value为对象的Code，Option的key为index，可以得到以键值对形式的value。当需要整个对象时，可以通过onchange事件结合选中项的index从数据源获取完整对象。示例代码详细展示了这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
 }