Vue2 过滤器以及在 Vue 3 中的替代方案

1. Vue2.js 过滤器简介

Vue.js 的过滤器允许你在模板中轻松地实现数据格式化。它是一种功能简单的数据转换函数，可以帮助开发者在展示数据时进行格式调整，而不改动底层数据。

2. 如何在 Vue 2 中创建过滤器

在Vue2中创建全局过滤器的方法如下：

Vue.filter('formatDate', function (value) {
  if (!value) return ''
  return new Date(value).toLocaleDateString()
})

创建局部过滤器的方法如下：

new Vue({
  el: '#app',
  data: {
    date: '2022-01-01'
  },
  filters: {
    formatDate: function (value) {
      if (!value) return ''
      return new Date(value).toLocaleDateString()
    }
  }
})

3. 在模板中使用过滤器

过滤器可以在两种地方使用：

1. 插值表达式：{{ value | filter }}
2. v-bind 表达式：v-bind:attribute="value | filter"

4. 在 Vue 3 中替代过滤器的方式

修改时间格式案例：

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

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

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

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

2. 下载 Day.js

   npm i [email protected]
   

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. 在 user-manage 中使用全局属性处理时间解析

   <el-table-column :label="$t('msg.excel.openTime')">
             <template #default="{ row }">
               {{ $filters.dateFilter(row.openTime) }}
             template>
           el-table-column>