美文网首页
【vue】使用el-date-picker遇到的坑:回显后无法更

【vue】使用el-date-picker遇到的坑:回显后无法更

作者: SophieRabbit | 来源:发表于2019-12-03 10:13 被阅读0次

    <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事件驱动日期选择器数据问题,完美解决。

    相关文章

      网友评论

          本文标题:【vue】使用el-date-picker遇到的坑:回显后无法更

          本文链接:https://www.haomeiwen.com/subject/qefqyctx.html