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

项目场景:

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


原因分析:

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

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

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值