Ant design vue中的a-select在动态给option赋值之后，placeholder失效

一、问题描述

最近做一个项目，用到了a-select，placeholder出现了问题

先看一下不起作用的代码

			<a-col :md="8" :sm="24">
              <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }">
                <a-select
                  style="width: 100%"
                  :allowClear="true"
                  placeholder="请选择学院"
                  v-model="receiveAcademy"
                >
                  <a-select-option v-for="item in allCollege" :key="item">{
   
   {item}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

data里定义的变量

 data () {
    
    
    return {
    
    
   	  allCollege: [], // 保存请求到的所有学院
      receiveAcademy: '', // 保存选择的学院
    };
  },

 methods: {
    
    
    //获取所有学院
    getALLCollege () {
    
    
      getALLCollege().then(res => {
    
    
        this.allCollege = []
        this.allCollege = res.data.data.rows
      })
    },
  },

这样一看代码，没任何问题，但是placeholder就是不起作用了

二、解决办法

1、方法一（不推荐）

重置表单或初始表单的时候这里的receiveAcademy要设置成undefined，不可以是空字符串（placeholder方可起效果）

但是这种方法有一个弊端，如果后台接口所接受的参数不支持undefined，只支持空字符串，那么有可能导致接口不能返回正确的数据。

 data () {
    
    
    return {
    
    
   	  allCollege: [], // 保存请求到的所有学院
      receiveAcademy: undefined, // 保存选择的学院
    };
  },

这样就解决了这个问题

2、方法二

通过查看官方文档发现select有这么一个属性

如果想使用这个属性，那么我们定义的数据的结构就要发生改变，不能是单纯的字符串了，要修改为对象的形式，然后同时将原来的v-model改为：value，如果还想用v-model，就只能使用计算属性去处理三元表达式了。
看一下这种方法的代码

            <a-col :md="8" :sm="24">
              <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }">
                <a-select
                  style="width: 100%"
                  placeholder="请选择学院"
                  :value="queryReceiveAcademy.label ? queryReceiveAcademy : undefined"
                  label-in-value
                  @change="academyChange"
                >
                  <a-select-option v-for="item in allCollege" :key="item">{
   
   {item}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

data () {
    
    
    return {
    
    
      allCollege: [], // 保存请求到的所有学院
      queryReceiveAcademy: {
    
    
        key: '',
        label: ''
      }, // 保存选择的学院
    };
  },
methods: {
    
    
 //获取所有学院
    getALLCollege () {
    
    
      getALLCollege().then(res => {
    
    
        this.allCollege = []
        this.allCollege = res.data.data.rows
      })
    },
	//学院select发生点击之后
    academyChange (value) {
    
    
      let val = value.label.trim()
      //加入label-in-value属性后，value（v-model）值为对象{key: '',label: ''},每次给value绑定的对象赋值才可回显渲染到dom中。
      this.queryReceiveAcademy = {
    
    
        key: value.key.toString(),
        label: val
      }
    },
}