前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >最新elementui,el-data-picker回显修改不了,或回显不上的解决办法

最新elementui,el-data-picker回显修改不了,或回显不上的解决办法

作者头像
〆 千寻、
发布2020-03-11 18:26:25
5.3K1
发布2020-03-11 18:26:25
举报
文章被收录于专栏:技术分享文章技术分享文章

看了网上的文档,要么不全,要么不管用,麻烦,废话不多,直接上代码,如果不满足你的需求的话,自行修改,introForm的定义请自行定义,应该可以看得懂。

代码语言:javascript
复制
<el-col :span="24">
    <el-date-picker
            v-model="introForm.date"
            type="daterange"
            @input="daterangeChange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
    </el-date-picker>
</el-col>
<el-col :span="24">
    <el-date-picker
            v-model="introForm.datetime"
            type="datetime"
            @input="datetimeChange"
            format="yyyy-MM-dd HH:ss"
            value-format="yyyy-MM-dd HH:ss"
            placeholder="选择日期时间">
    </el-date-picker>
</el-col>
代码语言:javascript
复制
/**
 *日期时间改变
 * **/
datetimeChange(e){
    console.log(e)
    let _this =this
    _this.introForm.datetime = e
    _this.$forceUpdate();
},
/**
 * 开始日期-结束日期改变
 * **/
daterangeChange(e){
    let _this =this
    console.log(e)
    _this.$nextTick(() => {
        _this.$set(_this.introForm, "date", [e[0], e[1]]);
        _this.$forceUpdate();
    });
},

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1uvaer0usuq9w

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020年3月6日13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档