element-ui form表单 input输入框展示时间，精确到毫秒数

m0_66899315

已于 2022-06-10 15:50:15 修改

阅读量2.1k

点赞数

文章标签： elementui 前端 javascript

于 2022-06-10 15:28:02 首次发布

本文链接：https://blog.csdn.net/m0_66899315/article/details/125221989

版权

类似上述效果，处理时间的方法，是定义在 @/utils/common.js里面，处理时间的方法如下

export const timeShow = (
  date,
  isMoment = true,
  isStart = true,
  str = "YYYY-MM-DD"
) => {
  return date
    ? isMoment
      ? moment(date).format(str)
      : new Date(
          `${moment(date).format("YYYY-MM-DD")} ${
            isStart ? "00:00:00" : "23:59:59:999"
          }`
        ).getTime()
    : "";
};

vue文件里面引入这个方法

import { timeShow } from "@/utils/common.js";

之后，

 <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间：" v-if="operType != 1">
                {{
                timeShow(
                addForm.startTime,
                true,
                "YYYY-MM-DD HH:mm:ss"
                )
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间：" v-if="operType != 1">
                {{
                timeShow(
                addForm.endTime,      
                true,
                "YYYY-MM-DD HH:mm:ss"
                )
                }}
              </el-form-item>
            </el-col>
          </el-row>

在使用中会发现，直接使用时间处理方法timeShow,console面板里面会报错

这是因为，html文件只识别自己所在js文件，methods里面定义的方法，如果引入了公共方法，并且要在html文件里使用的话，必须在本地文件要有个承接方法，如下

在js文件里定义方法

timeShows(date, isMoment = true, str = "YYYY-MM-DD") {

return timeShow(date, isMoment, str);

},

之后在html文件中只需要使用timeShows方法就ok啦，如下：

 <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间：" v-if="operType != 1">
                {{
                timeShows(
                addForm.startTime,               
                true,
                "YYYY-MM-DD HH:mm:ss"
                )
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间：" v-if="operType != 1">
                {{
                timeShows(
                addForm.endTime,
                true,
                "YYYY-MM-DD HH:mm:ss"
                )
                }}
              </el-form-item>
            </el-col>
          </el-row>