vue3.0 格式化 element-ui 日期 顯示

vue3.0 格式化 element-ui 日期 顯示

main.js

import Vue from "vue";
import App from "./App.vue";
import { plugin } from "vue-function-api";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./mockjs/index"; // 導入mockjs
Vue.config.productionTip = false;

//---------------------時間過濾-------------------------------------
import * as filters from "./filters"; // 時間過濾;

Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});
//--------------------時間過濾--------------------------------------

Vue.use(ElementUI);
Vue.use(plugin);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

src\filters\index.js

export const dateFormat = (dtStr) => {
  const dt = new Date(dtStr);
  const y = dt.getFullYear();

  // padStart(2, "0");  字符串的長度2位，就在前面補一個 '0'
  const m = (dt.getMonth() + 1).toString().padStart(2, "0");
  const d = dt.getDate().toString().padStart(2, "0");
  const hh = dt.getHours().toString().padStart(2, "0");
  const mm = dt.getMinutes().toString().padStart(2, "0");
  const ss = dt.getSeconds().toString().padStart(2, "0");

  // 判斷是否大於10，小於10拼接一個0；
  // const m = dt.getMonth() + 1 > 10 ? dt.getMonth() : "0" + dt.getMonth();
  // const d = dt.getDate() > 10 ? dt.getDate() : "0" + dt.getDate();
  // const hh = dt.getHours() > 10 ? dt.getHours() : "0" + dt.getHours();
  // const mm = dt.getMinutes() > 10 ? dt.getMinutes() : "0" + dt.getMinutes();
  // const ss = dt.getSeconds() > 10 ? dt.getSeconds() : "0" + dt.getSeconds();

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
};

表格 格式化日期

  <el-table-column align="center" label="日期">
    <template v-slot="scope">
      {{ scope.row.ctime | dateFormat }}
    </template>
  </el-table-column>