【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;
}

在这里插入图片描述

posted @ 2022-11-14 18:38  Sqsdhc  阅读(1454)  评论(0)    收藏  举报