Element-plus 自定义主题和设置全局的时间格式化函数

自定义主题

$--color-primary: #ff8c5d;
$--color-success: #3A9B6A;
$--color-warning: #E68756;
$--color-danger: #E54947;
$--color-info: #2BB5D1;
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': $--color-primary, ),
    'success': ('base': $--color-success, ),
    'warning': ('base': $--color-warning, ),
    'danger': ('base': $--color-danger, ),
    'info': ('base': $--color-info, ),
  ),
);

@use "element-plus/theme-chalk/src/index.scss" as *;

设置全局的时间格式化函数

import { ElTableColumn } from "element-plus";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { parseTime } from "@/utils/authtime";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

// 设置全局的时间格式化函数
ElTableColumn.props.formatter = {
  type: ElTableColumn["formatter"],
  default:
    () =>
    (row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => {
      if (column.property == "releaseAt" && cellValue === 0) {
        return 0;
      }
      if (cellValue === "") {
        return "-";
      }
      let re = cellValue;
      switch (column.type) {
        case "date":
          re = parseTime(cellValue);
          break;
        case "day":
          re = parseTime(cellValue, "{y}-{m}-{d}");
          break;
      }
      return re;
    }
};
// 设置element全局默认语言
ElConfigProvider.props.locale = {
  default: zhCn
};