Vue定义全局过滤器和全局公共函数

最新推荐文章于 2024-08-09 15:22:04 发布

Flowering_Vivian

最新推荐文章于 2024-08-09 15:22:04 发布

阅读量769

点赞数

分类专栏：前端项目常见问题总结文章标签： vue 过滤器 filter javascript

本文链接：https://blog.csdn.net/Flowering_Vivian/article/details/108746244

版权

前端项目常见问题总结专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、vue定义全局过滤器

1.定义过滤器js文件，例如：src/common/filters/filter.js

filter.js文件内容如下：

//所属部门
exports.departmentFilter = (value) => {
    switch(value) {
        case 1:
            return '人力资源部';
            break;
        case 2:
            return '技术部';
            break;
        case 3:
            return '客服部';
            break;
        case 4:
            return '市场部';
            break;
        case 5:
            return '产品部';
            break;
    };
};

2.main.js中添加以下代码

//全局过滤器
import filters from './common/filters/filter.js'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

3.vue文件中调用

<el-form-item label="所属部门：" label-width="120px">
  <span>{{ adminFormView.department | departmentFilter }}</span>
</el-form-item>

4.如果filter需要传2个参数的话，只需要在vue调用的时候传第二个参数，因为默认会传第一个参数

例如：在3的基础上再传递status参数，则示例如下：

<el-form-item label="所属部门：" label-width="120px">
  <span>{{ adminFormView.department | departmentFilter(adminFormView.status) }}</span>
</el-form-item>

filter.js文件内容如下：

//所属部门
exports.departmentFilter = (department, status) => {
    console.log(department);
    console.log(status);
};

二、vue定义全局公共函数

1.定义全局公共函数js文件，例如：src/common/js/util.js

util.js文件内容如下：

export default {
    formatterDepartment: function(val) {
        switch(val) {
            case 1:
                return '人力资源部';
                break;
            case 2:
                return '技术部';
                break;
            case 3:
                return '客服部';
                break;
            case 4:
                return '市场部';
                break;
            case 5:
                return '产品部';
                break;
        };
    },
};

2.main.js中添加以下代码

//全局方法
import util from './common/js/util.js'
Vue.prototype.util = util;

3.vue文件中调用

//template部分
<el-table :data="developerListData" stripe border>
	<el-table-column prop="developerId" label="管理员ID" min-width="10%"></el-table-column>
	<el-table-column prop="developerName" label="管理员名称" min-width="10%"></el-table-column>					
	<el-table-column prop="email" label="邮箱" min-width="17%"></el-table-column>
	<el-table-column prop="mobile" label="手机号" min-width="15%"></el-table-column>
	<el-table-column prop="department" :formatter="departmentFormatter" label="所属部门" min-width="15%"></el-table-column>					
</el-table>

//methods部分
departmentFormatter(row, column, cellValue) {
  return this.util.formatterDepartment(cellValue);
},