vue3全局属性处理时间展示问题

在 Vue3中取消了 过滤器的概念，其中：

1. 局部过滤器被完全删除
2. 全局过滤器虽然被移除，但是可以使用 全局属性 进行替代

那么在列表中的时间处理部分，在 vue2 时代通常我们都是通过 全局过滤器 来进行实现的，所以在 vue3 中我们就顺理成章的通过 全局属性 替代实现

1. 时间处理部分我们通过 Day.js 进行处理

2. 下载 Day.js

   npm i dayjs@1.10.6
   

3. 创建 src/filter 文件夹，用于定义 全局属性

   import dayjs from 'dayjs'
   ​
   const dateFilter = (val, format = 'YYYY-MM-DD') => {
     if (!isNaN(val)) {
       val = parseInt(val)
     }
   ​
     return dayjs(val).format(format)
   }
   ​
   export default app => {
     app.config.globalProperties.$filters = {
       dateFilter
     }
   }
   

4. 在 main.js 中导入

   // filter
   import installFilter from '@/filters'
   ​
   installFilter(app)
   

5. 在 el-table 中使用全局属性处理时间解析

<el-table-column label="操作时间" min-width="160">
  <template #default="{ row }">
    {{ $filters.dateFilter(row.operator,'YYYY-MM-DD HH:mm:ss') }}
  </template>
</el-table-column>