0


【element UI】解决el-date-picker选择日期后视图不更新的问题,亲测有效

开发中使用到了date-picker日期选择器,重新赋值后再点击日期进行选择,却发现视图没有更新,提交后反而会显示修改后的结果。

尝试了许多方法,比如设置初始值、普通赋值、使用this.$set进行赋值,发现都没有效果。

最后通过this.$forceUpdate()强制更新解决问题!!!

Vue代码:

<el-date-pickerclearablesize="small"v-model="form.dateRange"type="daterange"value-format="yyyy-MM-dd"range-separator="to":start-placeholder='$t("caseindex.StartTime")':end-placeholder='$t("caseindex.EndTime")'@input="changeDate"></el-date-picker>

changeDate事件:

changeDate(){this.$forceUpdate()},

看网上解释是说:数据层次太多导致render函数没有自动更新,需要调用this.$forceUpdate()强制刷新,触发updated生命周期。

this.$forceUpdate()的作用:迫使VUE实例重新渲染。注意此方法只影响实例本身和插入插槽内容的子组件,并非所有的子组件。

若使用本文方法还未解决,建议参考 vue双向绑定失效,视图不更新,$set()失效解决办法,使用时间戳加强制更新的方式解决此类问题。


本文转载自: https://blog.csdn.net/weixin_44694048/article/details/126784384
版权归原作者 码上出奇迹 所有, 如有侵权,请联系我们删除。

“【element UI】解决el-date-picker选择日期后视图不更新的问题,亲测有效”的评论:

还没有评论