vue3 el-table-column 修改时间格式

发布时间 2023-04-11 10:49:34作者: Func~

根据element文档说明,el-table中的el-table-column 是可以使用 formatter 格式化时间的。

 

 先添加 绑定函数 formatter 

<el-table-column prop="createdTimeFormat" :formatter="dateFormat" label="日期" width="170"></el-table-column>

 新建格式化时间的函数

//时间格式化
const dateFormat =  (row) => {
    let time = new Date(row.createdTime)// row 表示一行数据, createdTime 表示要格式化的字段名称
    if(!time){
        return ''
    }
    let year = time.getFullYear()
    let month = dateIfAddZero(time.getMonth()+1)
    let day = dateIfAddZero(time.getDate())
    return year + '-' + month + '-' + day+ ' '
}

const dateIfAddZero = (time) => {
    return time < 10 ? '0'+ time : time
}

最后就大功告成