【vue】使用el-date-picker遇到的坑:回显后无法更
<el-form-item
label="选择日期:"
prop="timeArrange"
required
:label-width="formLabelWidth"
>
<el-date-picker
class="info-form-times"
v-model="form.timeArrange"
type="daterange"
unlink-panels
value-format="timestamp"
range-separator="至"
start-placeholder="起始年月日"
end-placeholder="结束年月日"
@change="handleTimestamp"
></el-date-picker>
</el-form-item>
我在使用elementUI里的日期选择器时,遇到了当没有设置选择器的初始值,首次打开,选择日期后,可以拉起@change事件;而当设置好回显值(初始值)时,无法拉起change事件的问题。
官网的el-date-picker组件的事件有以下三种:
官方文档中的事件经过测试,当事件绑定改为blur时,拉起handleTimestamp方法成功。看来原因出在事件监听的方式绑定上面。
@blur="handleTimestamp"
我们再看一下源码中,为什么是blur才行:
node_modules里,date-picker组件源码node_modules里,date-picker组件内监听picker显示隐藏属性里拉起blur函数,但未拉起change函数。
使用blur事件驱动日期选择器数据问题,完美解决。