一、效果图

在这里插入图片描述

二、代码

设置 keydefault-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
	      });
	  }
  }
 }

总结

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

Logo

前往低代码交流专区

更多推荐