vue3 格式化时间和拓展表格的属性

目录

一、业务需求

1.将日期格式化 

2. 在所有跟新人里都添加先生或者未知

3.找到day.js官网 https://dayjs.fenxianglu.cn/category/#element-plus

 二、代码 list.vue

(0) 引入日期类

 (1)在表格组件里将日期列和更新人列 添加如下代码：

(2)然后声明出formatter

三、显示效果

一、业务需求

1.将日期格式化 

2. 在所有跟新人里都添加先生或者未知

  前端渲染时间时会在时间里多加”T“ 非常影响美观性 所以我们需要在element-plus 组件里找到表格找到。formatter属性

3.找到day.js官网 https://dayjs.fenxianglu.cn/category/#element-plus

Element-plus (opens new window)组件库默认支持 dayjs 进行日期时间处理，所以可以直接导入使用，相关 Date Picker (opens new window)组件介绍。

import { dayjs } from 'element-plus'

 二、代码 list.vue

(0) 引入日期类

import { dayjs } from 'element-plus'

 (1)在表格组件里将日期列和更新人列 添加如下代码：

  <el-table-column
      prop="lastUpdateTime"
      label="更新时间"
      width="160"
      :formatter="formatter"
    />
    <el-table-column
      prop="lastUpdateBy"
      label="更新人"
      width="120"
      :formatter="formatter"
    />

(2)然后声明出formatter

const formatter = (_row: any, column: any, cellValue: any, _index: any) => {
  if (column.property == "lastUpdateTime") {
      // 格式化时间
    return dayjs(cellValue).format("YYYY-MM-DD H:m");
  } else if (column.property == "lastUpdateBy") {
    return cellValue == "" ? "未知" : cellValue + "先生";
  }
};

三、显示效果