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 对象，每个函数接收第一个参数为待处理值，后续参数为模板中传入的额外参数：
- 函数名即过滤器名（如
dateFmt），模板中用{{ timestamp | dateFmt('YYYY-MM-DD HH:mm:ss') }} - 建议做空值/非法值校验，避免
new Date(invalid)返回Invalid Date - 支持传参：第二个形参对应模板里括号内的值，例如
| dateFmt('MM/DD/YYYY')→ 函数中format就是该字符串
在表格单元格中使用（v-for 渲染）
对 <el-table> 或原生 <table> 的列内容，直接在插值或 v-bind 中调用过滤器：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
<el-table-column prop="createTime" :formatter="(_, __, row) => row.createTime | dateFmt('YYYY-MM-DD')"></el-table-column>（注意：:formatter是方法，不能直接写管道符；需配合计算属性或方法封装） - 更常用的是在
<template #default="{ row }">{{ row.createTime | dateFmt('YYYY-MM-DD HH:mm') }}</template> - 若用
v-bind绑定文本类属性（如title），也可用：:title="row.updateTime | dateFmt('YYYY年MM月DD日')"
全局注册 filters（避免重复定义）
如果多个组件都要格式化日期，推荐在 main.js 或入口文件中全局注册：
立即学习“前端免费学习笔记（深入）”；
Vue.filter('dateFmt', (value, format = 'YYYY-MM-DD HH:mm:ss') => { ... })- 全局过滤器在所有组件模板中都可直接使用，无需在每个组件里重复声明
filters - 注意：Vue 3 已移除 filters 支持，此方式仅适用于 Vue 2.x 项目（Options API）
注意事项与替代建议
虽然 filters 写法简洁，但有几点必须留意：
- 不能在
v-if/v-for等指令中使用（仅限插值和v-bind） - 无法访问组件实例（
this），所以不能依赖响应式数据或 methods —— 如需动态格式（如用户偏好），改用计算属性或方法 - 复杂逻辑（如时区转换、国际化）建议用
dayjs或date-fns封装成方法，而非塞进 filter - Vue 2 项目中仍可用，但新项目建议转向 Composition API +
computed或工具函数
