elementui filters
关于 ElementUI 的 Filters 功能
ElementUI 提供过滤器（Filters）功能，主要用于格式化文本显示。过滤器可以在模板中直接使用，适用于表格列、标签等场景。
内置过滤器
ElementUI 内置了一些常用过滤器：
capitalize: 将字符串首字母大写uppercase: 将字符串转为大写lowercase: 将字符串转为小写currency: 格式化货币显示
<el-table-column
prop="name"
label="姓名"
:formatter="(value) => $options.filters.capitalize(value)">
</el-table-column>自定义过滤器
可以注册全局过滤器或局部过滤器：
全局过滤器
// main.js
Vue.filter('formatDate', function(value) {
if (!value) return ''
return moment(value).format('YYYY-MM-DD')
})局部过滤器
export default {
filters: {
truncate(value, length) {
if (!value) return ''
return value.length > length
? value.substring(0, length) + '...'
: value
}
}
}在表格中使用过滤器
ElementUI 表格组件支持通过 formatter 属性使用过滤器：
<el-table-column
prop="date"
label="日期"
:formatter="(value) => $options.filters.formatDate(value)">
</el-table-column>过滤器链式调用
可以连续使用多个过滤器：
<span>{{ message | capitalize | truncate(10) }}</span>过滤器参数传递
过滤器可以接收额外参数：
Vue.filter('pluralize', function(value, singular, plural) {
return value === 1 ? singular : plural
})<span>{{ count | pluralize('item', 'items') }}</span>注意事项
- 过滤器应设计为纯函数，不修改原始数据
- 复杂逻辑建议使用计算属性替代过滤器
- Vue 3 中过滤器已被移除，Element Plus 不再支持此功能
