Vue3.0 注册全局过滤器

问题描述

当后端将时间格式返回给前端时，给到的数据格式实际上是字符串(2022-04-17T00:00:00),而前端渲染的时候，肯定不能这样展示给用户，要根据自己的业务来展示。

---

解决方案：

使用day.js 编写一个转换日期格式的函数，并注入到全局过滤器中

//1.安装day.js
npm install day.js


//2.修改main.js代码
import dayjs from 'dayjs'

//添加全局日期过滤器vue3.0的写法，2.0参考官方写法
app.config.globalProperties.$filters = {
    format(value:string) {
        if (value) {
            return dayjs(value).format('YYYY-MM-DD')
        } else {
            return ''
        }
    }
}

//3. 使用
<el-table-column prop="createDt" label="创建时间" show-overflow-tooltip>
	<template #default="scope">
		<span>{{ $filters.format(scope.row.createDt) }}</span>
	</template>
</el-table-column>