【element】el-table-column日期格式化

要对一列日期进行格式化。可使用formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。
参阅element官网
在el-table-column中使用formatter 属性绑定一个方法。我这里方法 名为formatter

 <el-table :data="listdata">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column>
        <template #default="scope"
          ><el-popover
            placement="top-start"
            :title="scope.row.packName"
            :width="200"
            trigger="hover"
          >
          <el-image

                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              />
            <template #reference>
              <el-image
              class="list-image"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              />
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="packName" label="图片包货号"></el-table-column>
      <el-table-column prop="createDateTime" label="上传时间" :formatter="formatter"></el-table-column>
      <el-table-column prop="updateDateTime" label="修改时间" :formatter="formatter"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

定义好formatter方法会传入两个参数:row和column

import { formatDate } from "../utils/formatter";
formatter(row,column)
    {
      return formatDate('YYYY-mm-dd HH:MM',row[column.property]);
    }

我把日期处理的js封装成了共用的js。考虑到再其他的地方有可能还会使用到

export function formatDate(fmt,datestr)
{
    var date = new Date(datestr);
    let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加,必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
}

在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sqsdhc

多多支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值