Vue中获取当前时间,可用于判断信息是否已过有效时间

<template>
    <div class="content-wrapper">
        <section>
            <el-table border stripe :data="datas"  highlight-current-row
                      @current-change="handleCurrentChange"
                      width="100%" tooltip-effect="light" v-loading="requested">

                <el-table-column label="截止时间" :show-overflow-tooltip="true" prop="endTime"
                                 header-align="center" align="center">
                </el-table-column>
                
                <el-table-column label="状态" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="currentTime > scope.row.endTime">失效</el-tag>
                        <el-tag type="success" v-if="currentTime < scope.row.endTime">未失效</el-tag>
                    </template>
                </el-table-column>
                
            </el-table>
        </section>
    </div>
</template>
<style>

</style>
<script>
    export default {
        data() {
            return {
                queryForm: {
                    title: '',
                    page: 1,
                    size: 10
                },
                datas: [],
                requested: false,
                currentTime: '',
            }
        },
        mounted() {
            this.query(this.queryForm.page, this.queryForm.size);
        },
        methods: {
            query() {
                this.requested = true;
                this.http.get('/admin/messageInfo', this.queryForm).then(resp => {
                    this.currentTime = this.format(new Date(), "yyyy-MM-dd HH:mm:ss");
                    this.currentRow = null;
                    this.datas = resp.data.content;
                }).finally(() => {
                    this.requested = false;
                });
            },
            format(date, fmt) {
                let o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "H+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (let k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },
        }
    }
</script>

需要注意的一点是:HH才是24小时制,hh是12小时制

因此如果用value-format时间组件,组件只会保留日期的选择,会失去时间的选择

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值