Ant Design vue使用组件select设置default-value

最新推荐文章于 2024-08-25 16:35:25 发布

那年，那关心

最新推荐文章于 2024-08-25 16:35:25 发布

阅读量9k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46181037/article/details/115668971

版权

本文详细介绍了如何在AntDesignVue的Select组件中设置默认值。第一种方法是直接设置default-value为固定值，例如'aaaa'。第二种方法是在组件挂载后，通过获取数据并设置default-value为数据的第一个元素，实现动态设置默认值。在Vue的生命周期中，defaultValue只会初始化一次，因此需要动态设置时需采用这种方法。

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

Ant Design vue使用组件select设置default-value

一、效果图
二、代码
- 1、将default-value设置为固定的值
- 2、动态将default-value设置为数据的第一个
总结

一、效果图

在这里插入图片描述

二、代码

设置 key 和 default-value 的值相同

1、将default-value设置为固定的值

<!-- html代码 -->
<a-select :key="DefaultValue"  :default-value="DefaultValue" style="width: 220px" @change="ScaleHandleChange">
  <a-select-option :value="item.value" v-for="(item,index) in plateList" :key="index">
    {{item.text}}
  </a-select-option>
</a-select>

//js代码
export default {
  data(){
    return{
      DefaultValue:'aaaa',
    }
  },
 }

2、动态将default-value设置为数据的第一个

<!-- html代码 -->
<a-select :key="DefaultValue"  :default-value="DefaultValue" style="width: 220px" @change="ScaleHandleChange">
  <a-select-option :value="item.value" v-for="(item,index) in plateList" :key="index">
    {{item.text}}
  </a-select-option>
</a-select>

//js代码
let _self;
export default {
  data(){
    return{
      DefaultValue:'',
      list:[],
    }
  },
  mounted(){
  	_self = this;
  	_self.getDefult;
  },
  methods:{ 
	  getDefult(){
		  getList().then((res) => { //getList()是封装的promise请求方法
		        _self.list= res.result
		        _self.DefaultValue= _self.list[0].text
	      });
	  }
  }
 }