如何在vue中配置全局过滤器filter

最新推荐文章于 2025-04-03 22:04:15 发布

勤奋的七仔

最新推荐文章于 2025-04-03 22:04:15 发布

阅读量1k

点赞数 1

文章标签：过滤器 vue filter

本文链接：https://blog.youkuaiyun.com/XiehaiyanLI/article/details/108568964

版权

本文介绍了如何在Vue项目中创建和注册全局过滤器。通过新建filter文件夹，编写index.js并进行具体操作，然后在main.js中引入并全局注册，即可在整个项目中使用自定义的全局过滤器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中会经常用到过滤器，有全局过滤器、局部过滤器，局部过滤器跟data、methods、created等同级进行操作，全局过滤器需要在main.js中全局引入注册才能使用。下面就按照步骤来一步一步实现全局过滤器:

新建filter文件夹，新建index.js
在index.js中写要执行的操作：

//权限列表 全选等级
export function level(num) {
    switch (num) {
        case "0":
            return "一级";
        case "1":
            return "二级";
        case "2":
            return "三级";
    }
}



//权限列表  标签颜色
export function type(num) {
    switch (num) {
        case "0":
            return "";
        case "1":
            return "success";
        case "2":
            return "danger";
    }
}

在main.js中引入和全局注册过滤器

import * as filters from '../src/filters/filter'

//全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

此时就可以在不同的.vue中使用定义的全局过滤器了

 <template slot-scope="scope">
          <el-tag :type="scope.row.level | type">{{scope.row.level | level}}</el-tag>
 </template>