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的，在如下二种情况下它会回显异常：

1. 配置没有，它会直接显示你v-model绑定的值，表面看就是el-select的配置项的value值，此时你补全配置即可
2. 当你配置的项的value和你v-model绑定的值类型不一致的时候，它也会直接显示v-model绑定的值，此时确认服务端最后要提交的值是什么类型的，修正类型即可