Vue moment 时间格式处理插件的使用

一般对于前端工作者都需要处理时间格式，后端返回给我们的时间数据例如如下，需要前端手动处理：

 

一、 下载moment插件

npm install --save moment

二、全局挂载（main.js //设置中文，可根据项目实际情况）

 

 三、组件内部使用（引用）

import moment from "moment";

四、使用场景和方法

1.可通过vue render  在配置表格头中使用

{
          title: "创建时间",
          key: "createTime",
          minWidth: 130,
          align: "center",
          render(h, params) {
            return h(
              "span",
              moment(Number(params.row.createTime)).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            );
          },
        },

2.在请求数据接口时进行封装处理

//  演示  列表数据
    applistApiFn() {
      var dataChange = {
        page: this.levelFrom.page,
        size: this.levelFrom.limit,
      };
      if (this.selectStatus == "name") {
        dataChange.name = this.levelFrom.title;
      } else if (this.selectStatus == "phone") {
        dataChange.phone = this.levelFrom.title;
      }
      businessListApi(dataChange)
        .then((res) => {
          let data = res.data;
          data.forEach((item) => {
            item.updateTime = Number(item.updateTime);
            item.updateTime = moment(item.updateTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            item.createTime = Number(item.createTime);
            item.createTime = moment(item.createTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.levelLists = res.data;
          this.total = parseFloat(res.count);
          console.log(res, "广告商数据列表");
        })
        .catch((res) => {
          this.$Message.error("获取数据失败");
        });
    },

五、效果展示