ElementUi DatePicker 日期选择器组件:日期无法回显、@change方式失效
日期无法回显日期回显后@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,其余不变。