Vue Options API如何使用 filters 选项格式化表格中的日期数据

Vue 2 Options API 的 filters 选项用于模板中轻量格式化日期，如时间戳转“2024-06-15 14:30:22”，不修改原始数据；支持组件内定义和全局注册，但 Vue 3 已移除该特性。

Vue Options API 中的 filters 选项可用于在模板中简洁地格式化表格里的日期数据，比如把时间戳或 Date 对象转成 2024-06-15 14:30:22 这类可读格式。它不修改原始数据，只影响视图层显示，适合轻量、复用性强的格式化场景。

定义 filters 选项（组件内）

在组件的 export default 配置对象中，直接声明 filters 对象，每个函数接收第一个参数为待处理值，后续参数为模板中传入的额外参数：

1. 函数名即过滤器名（如 dateFmt），模板中用 {{ timestamp | dateFmt('YYYY-MM-DD HH:mm:ss') }}
2. 建议做空值/非法值校验，避免 new Date(invalid) 返回 Invalid Date
3. 支持传参：第二个形参对应模板里括号内的值，例如 | dateFmt('MM/DD/YYYY') → 函数中 format 就是该字符串

在表格单元格中使用（v-for 渲染）

对 <el-table> 或原生 <table> 的列内容，直接在插值或 v-bind 中调用过滤器：

1. <el-table-column prop="createTime" :formatter="(_, __, row) => row.createTime | dateFmt('YYYY-MM-DD')"></el-table-column>（注意：:formatter 是方法，不能直接写管道符；需配合计算属性或方法封装）
2. 更常用的是在 <template #default="{ row }">{{ row.createTime | dateFmt('YYYY-MM-DD HH:mm') }}</template>
3. 若用 v-bind 绑定文本类属性（如 title），也可用：:title="row.updateTime | dateFmt('YYYY年MM月DD日')"

全局注册 filters（避免重复定义）

如果多个组件都要格式化日期，推荐在 main.js 或入口文件中全局注册：

1. Vue.filter('dateFmt', (value, format = 'YYYY-MM-DD HH:mm:ss') => { ... })
2. 全局过滤器在所有组件模板中都可直接使用，无需在每个组件里重复声明 filters
3. 注意：Vue 3 已移除 filters 支持，此方式仅适用于 Vue 2.x 项目（Options API）

注意事项与替代建议

虽然 filters 写法简洁，但有几点必须留意：

1. 不能在 v-if/v-for 等指令中使用（仅限插值和 v-bind）
2. 无法访问组件实例（this），所以不能依赖响应式数据或 methods —— 如需动态格式（如用户偏好），改用计算属性或方法
3. 复杂逻辑（如时区转换、国际化）建议用 dayjs 或 date-fns 封装成方法，而非塞进 filter
4. Vue 2 项目中仍可用，但新项目建议转向 Composition API + computed 或工具函数