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

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

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

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

Vue代码：

<el-date-picker clearable size="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()失效解决办法，使用时间戳加强制更新的方式解决此类问题。

创作不易，期待小伙伴们的点赞 + 收藏⭐ + 关注❤️（可互关），评论和私信都会回的！】