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

项目场景:

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

el-select下拉框只回显value不回显label的原因以及解决方法_第1张图片


原因分析:

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

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()函数可以让你的应用更加健壮,稳定性更好。

你可能感兴趣的:(vue.js,前端,javascript,elementui)