vue3 ElementPlus el-table中对时间格式的自定义

vue3 ElementPlus el-table中对时间格式的自定义

将el-table表格中的时间格式自定义成你想要的字符串格式,里面还用到了日期比较,最终效果为2024-01-01

<template>
<el-table>
  <el-table-column prop="orderDate" :formatter="dateFormat" label="委托日期" width="90" show-overflow-tooltip sortable/>
</el-table>
</template>
<script setup>
//委托日期列时间格式化
const dateFormat =  (row:any) => {
  let time = new Date(row.orderDate)// row 表示一行数据, orderDate 表示要格式化的字段名称
  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:any) => {
  return time < 10 ? '0'+ time : time
}
</script>