ElementUi DatePicker 日期选择器组件：日期无法回显、@change方式失效

日期无法回显

预期效果：页面其他组件改变日期后，日期选择器显示的日期随之改变

想象中做法：

// <template>中写组件：<el-date-pickerclass="value":value="termInfo5Data.dateArray"type="daterange":clearable="false"unlink-panelsalign="right":editable="true":picker-options="progressPickerOptions"format="yyyy/MM/dd"value-format="yyyyMMdd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="dateChange"></el-date-picker>// <script>中操作数据this.termInfo5Data.dateArray[0] = this.date1this.termInfo5Data.dateArray[1] = this.date2

但上述做法 date1、date2改变后，dateArray虽会改变，但视图不会更新。这句直接赋值的代码只能将日期数据显示在 日期选择器的预览Input里，当需要重新选择日期时，视图不会因为数据的改变而更新。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

this.$set(this.termInfo5Data, 'dateArray', [this.date1, this.date2])

日期回显后@change方法失效

解决方法：将@change改为@input，其余不变。