问题核心原因 #

你遇到的问题本质是value类型不匹配：你的<a-select-option>里的value=1其实是字符串类型（因为没加v-bind绑定，Vue会自动把它解析为字符串"1"），但profile.race是整数类型（比如1）。而Ant Design Vue的Select组件是通过**严格相等（===）**来匹配选项的，整数1和字符串"1"不相等，所以组件找不到对应的选项，只能显示原始的数字值。

你直接写initialValue: '1'时，这个值是字符串"1"，和选项的value类型完全一致，所以能正确匹配并显示对应文字。而你尝试的initialValue: '\''+profile.race+'\''，最终得到的是带单引号的字符串（比如"'1'"），和选项的value"1"还是不匹配，所以仍然显示数字。

解决办法 #

方法1：将选项的value设为数字类型（推荐）

给<a-select-option>的value加上v-bind（缩写为:），让它变成数字类型，和profile.race的整数类型统一：

<a-select v-decorator="[ 
  'race', 
  { 
    initialValue: profile.race, 
    rules: [ { required: true, message: 'Race is required.' } ] 
  } 
]" >
  <a-select-option :value="1">Malay</a-select-option>
  <a-select-option :value="2">Chinese</a-select-option>
  <a-select-option :value="3">Indian</a-select-option>
  <a-select-option :value="4">Others</a-select-option>
</a-select>

这样profile.race的整数1会和:value="1"的数字1严格匹配，组件就能正确显示对应的选项文字了。

方法2：将initialValue转为字符串类型

如果不想修改选项的value类型，可以把profile.race转为字符串，让它和选项的字符串value匹配：

<a-select v-decorator="[ 
  'race', 
  { 
    initialValue: String(profile.race), 
    rules: [ { required: true, message: 'Race is required.' } ] 
  } 
]" >
  <a-select-option value=1>Malay</a-select-option>
  <a-select-option value=2>Chinese</a-select-option>
  <a-select-option value=3>Indian</a-select-option>
  <a-select-option value=4>Others</a-select-option>
</a-select>

用String(profile.race)把整数转为对应的字符串（比如1变成"1"），就能和选项的value完美匹配了。

内容的提问来源于stack exchange，提问作者Khairul Habib