el-select下拉框只回显value不回显label的原因以及解决方法_el-select 回显

项目场景：

提示：这里简述项目相关背景：

---

原因分析：

提示：这里填写问题的分析：

el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可

 el-select 中的value对值的类型很敏感

---

解决方案：

提示：这里填写该问题的具体解决方案：

1：在获取到返显数据的时候，将value转换成对应的类型即可

2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，

3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下

selectShenPiRenChange(val) {

      this.addPayOffForm.selectShenPiRen = this.selectList.find(

        (item) => item.id == val

      ).id;

      this.addPayOffForm.selectShenPiRenName = this.selectList.find(

        (item) => item.id == val

      ).userName;

      this.$nextTick(() => {

        this.$forceUpdate();

      });

    },

注：

this.$forceupdate()是Vue.js中的一个API，它可以强制组件更新，就是当组件的数据发生变化时，它可以立即更新组件的视图，而不需要等待下一次重新渲染。

this.$forceupdate()函数有以下特点：

1. 它可以强制组件更新，在数据发生变化时，可以立即更新组件的视图，而不需要等待下一次重新渲染；

2. 它可以避免组件重新渲染，提升性能；

3. 它可以避免在某些情况下出现不可预料的bug；

4. 它可以使组件在不同的环境中保持一致性；

使用this.$forceupdate()函数的方法很简单，只需在你的组件中调用它即可，例如：this.$forceupdate()

此外，this.$forceupdate()函数也可以接受一个参数，参数为boolean类型，传入true时，则可以强制执行子组件的更新，传入false时，则只更新当前组件本身。

综上所述，this.$forceupdate()是一个非常有用的API，它可以帮助开发者更新组件，提高性能，避免不可预料的bug，使组件在不同的环境中保持一致性，因此使用this.$forceupdate()函数可以让你的应用更加健壮，稳定性更好。