ant + vue3 : a-select标签在编辑时，回显问题

a-select a-select-option标签编辑时数据回显问题

第一种

<a-select
        style="width: 100%"
        placeholder="请选择"
        :showSearch="true"
        optionFilterProp="label"
        v-model:value="formState.id"
>
       <a-select-option value="1" label="四川">四川</a-select-option>
       <a-select-option value="2" label="云南">四川</a-select-option>
       <a-select-option value="3" label="贵州">四川</a-select-option>
 </a-select>

上面这种就是最简单的了，通常我们后端返回的对应id，是一个int类型的值，而上面的value，它看做的是一个String类型，这时只需要通过".toString()" 或"id + “” "这些前端方法转成String就行；看下面代码：

function reload() {
      clear();
      Object.keys(formState).map(key => {
          if (key === "beginTime" || key === "endTime") {
              formState[key] = moment(props.record[key]);//这里是为了上面的时间做的类型转换
          } else {
              formState[key] = props.record[key].toString() //转为String 是为了上面选择器回显
          }
      });
  }

##第二种：
还有一种就是通过接口动态获取下拉框所需要的选择列表：

<a-select
         :disabled="instruction.isDisabled"
         style="width: 100%"
         placeholder="请选择渠道"
         :showSearch="true"
         optionFilterProp="label"
         v-model:value="formState.channelId"
 >
     <a-select-option v-for="channel in data.allDataZ" key="channel.id" :value="channel.id.toString()"//这里转换是为了对应数据处理时的toString()
                      :label="channel.name">
         {{ channel.name }}
     </a-select-option>
 </a-select>

上面这种就是通过循环后端传回来的数据，然后进行选择的，这里要注意的就是由于我们这时候的value是绑定的channel 对象的id,而这时的Value通常不再是String类型，所以我在做的时候当时为了图快，将所有返回数据都循环做了".toString()"处理，导致到这里又变成了数据类型不一致，所以我这里又将int类型的Value转为了String类型;

所以其实最后的回显都要数据类型相同，一般通过打断点就可以发现；如果不想通过Map循环处理数据，也可以这样：

function reload(){
		//props.record是传过来的值
	  formState.picId = props.record.picId;
	  formState.productName = props.record.productName;
	  formState.picUrl = props.record.picUrl;
	  formState.picUrlOld = props.record.picUrl;
	  formState.picType = props.record.picType + "";
	  formState.picSort = props.record.picSort;
	  
    }

直接拿着返回的数据对象，挨个对应赋值，不对的就单个转换。