ant design分享记录-select下拉框获取value和label

最新推荐文章于 2023-12-15 13:30:21 发布

流远长季

最新推荐文章于 2023-12-15 13:30:21 发布

阅读量1.2w

点赞数 7

分类专栏： ant design 文章标签： vue

本文链接：https://blog.youkuaiyun.com/CNDNSNNN/article/details/108018780

版权

ant design 专栏收录该内容

3 篇文章

订阅专栏

本文详细讲解了在AntDesign中使用Select组件时，如何通过change事件正确获取value和label值，包括直接获取方法及labelInValue属性的使用技巧。

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

ant design select 下拉获取value和label过程

请耐心看完整个过程😂

// select 代码
<a-select
          v-decorator="[
            'categoryId',
            {rules: [{ required: true, message: '请选择设备分类' }]}
          ]"
          placeholder="请选择设备分类"
          @change="handleChangeSelect"
        >
          <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.categoryId">
            {{ item.name }}</a-select-option>
        </a-select>

<script>
  export default {
    name: 'DistribuAdd',
    data () {
      return {
        loading:false,
        categoryName:'',
        categoryList:[]
      }
    },
    methods: {
		handleChangeSelect (value, label){
	        debugger
	        this.categoryName = label.componentOptions.children[0].elm.data.trim()
	    }
      }
</script>

获取过程
在这里插入图片描述
select change方法触发，可以获取到value,第二个参数是option选项，在这个对象里可以查找到数据

获取到label，然后在trim()下就获取到label文本了

我看到别人写的ant design说加上labelInValue=“true”
有初始数据的，不能正常显示

<a-select
          labelInValue="true"
          v-decorator="[
            'categoryId',
            {rules: [{ required: true, message: '请选择设备分类' }]}
          ]"
          placeholder="请选择设备分类"
          @change="handleChangeSelect"
        >
          <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.categoryId">
            {{ item.name }}</a-select-option>
        </a-select>

在这里插入图片描述

value是一个对象导致无法回显到select对象上

handleChangeSelect (value, label){
        value = value.key
        debugger
        this.categoryName = value.label.trim()
 },

这样写，导致回显value没有label导致select无法选中
最终我还是回到自己最原始的方法上，是目前最好的解决方法
能回显，能下拉选，能得到label值