Element Plus组件el-select回显异常
前情
公司有经常需要做一些后台管理页面，我们选择了Element Plus，它是基于 Vue 3，面向设计师和开发者的组件库，是Vue框架生态中比较火的UI组件库，组件库丰富易用，组件链接：一个 Vue 3 UI 框架 | Element Plus
坑位
最近在开发一个需求，需要使用el-select组件实现多选，但是在回显的时候发现它回显的是value值而非label值，正常应该都是显示label值，value值是给程序用的，label才是给用户看的，如果让用户直接看到value值，用户会一脸蒙，根本不知道它是什么。
Why?
第一时间想到的是，是不是组件有参数可以配置哪一个字段用于回显，查了文挡无果，我无意去操作了下el-select才发现是因为当前select配置没有请求下来，如下图，所以当select配置没有的时候它会回显你绑定的值，因为没有配置它无法回显label
解决方案
理想情况下获取对应的el-select的正确配置，渲染好el-option即可正确回显label
坑中坑
好事多磨，获取了正确配置后，其中一个el-select是正确回显了label，但是另一个还是回显异常，查看配置是正常配置了的，又是一脸蒙的状态，如下图。
Why?
在反复确认后和多次尝试后发现其中有猫腻，发现服务端接口返回给我el-select配置和当前el-select的表单值类型是对不上的，应该是el-select在做回显value判断的时候用是===，值和类型都必须一致才行。如下图：
解决方案
查看服务端提交接口，发现它要求platform必须是字符串，那就是说它返回配置项数据类型是错的，这时有二种方法，一种是叫服务端修正下返回类型，另一种方法是前端在拉取配置后手动转下类型下拿来用，当然我选择了后者，自己动手丰衣足食，其实最优的方法是让服务端修正,前端修正的关键代码如下：
...
options.value.platformList = res.data.platform_options.map(item => {
item.value = item.value + "";
return item;
});
...
总结
在使用el-select的时候，正确的情况下都是会回显label的，在如下二种情况下它会回显异常：
- 配置没有，它会直接显示你v-model绑定的值，表面看就是el-select的配置项的value值，此时你补全配置即可
- 当你配置的项的value和你v-model绑定的值类型不一致的时候，它也会直接显示v-model绑定的值，此时确认服务端最后要提交的值是什么类型的，修正类型即可
