项目场景:
提示:这里简述项目相关背景:
原因分析:
提示:这里填写问题的分析:
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()函数可以让你的应用更加健壮,稳定性更好。