el-select组件后台返回值渲染时，错误显示为number

问题描述

项目场景：在使用el-select组件时，我们常常绑定一个数组，使用v-for渲染下拉列表；绑定传值value，和显示内容label，点击下拉列表选中我们想要的数据后，el-selcet中会显示我们选中的值，这一步没有问题，但点击编辑按钮，让弹窗中的数据回显到el-select中时，会出现显示的是数字，而不是我们想要的label。

代码：

<el-form-item label="分组" prop="groupId">
        <el-select v-model="form.groupId" placeholder="请选择分组" @change="">
          <el-option v-for="item in List" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
</el-form-item>

---

data中的list：

 list: [
        { id: 111, name: '选项一' },
        { id: 112, name: '选项二' },
        { id: 113, name: '选项三' },
        { id: 114, name: '选项四' }
      ],

后台返回的groupId：

 groupId : '114' ,

错误页面：

原因分析：

问题分析：后端返回的数据groupId的值类型为String类型，而页面上渲染的el-select使用的value是Number类型，当编辑状态时，后台返回的字段与value的字段值是相同的，但类型不一致，所以导致，页面无法匹配成功，el-select就会只显示后端返回的数字，而不会渲染对应的lebel值。

---

解决方案：

将页面v-for绑定的value值的字段类型，设置和后端返回字段类型保持一致，此处是后端为字符串，前端为数值，所以直接在前端页面上的el-option循环遍历时，将value值后面加一个空字符串即可。
代码：

<el-form-item label="分组" prop="groupId">
        <el-select v-model="form.groupId" placeholder="请选择分组" @change="">
          <el-option v-for="item in List" :key="item.id" :label="item.name" :value="item.id + '' "></el-option>
        </el-select>
</el-form-item>

同样的问题，当后端返会的id是Number类型时，前端v-for遍历的数组id值如果为String类型时，那我们只需要使用:value=“parseInt(item.id)” ,将字符串转为数值型。
注意：当id的值大于9位数时，parseInt转换数值，会出现精度缺失问题