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

一、效果图

二、代码

设置 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>
1
2
3
4
5
6

//js代码
export default {
  data(){
    return{
      DefaultValue:'aaaa',
    }
  },
 }
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6

//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
	      });
	  }
  }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

总结

defaultValue：指定默认选中的条目，defaultValue 在生命周期里面只执行一次，所以想动态的设置可以使用上述的方法；