vue filters过滤器与字典项

功能介绍：

在项目开发中，会遇到后台返回值为数字、字母等格式数据，具体显示则需根据字典项处理。可使用自定义过滤器，进行文本格式化。

大致需求：

1. 使用公共js文件，调用减少代码量；
2. 考虑不同字典项key值对应不同，增加传参处理；

具体实现：

一、过滤器js文件：

可存储在utils文件夹下。

export default {
    filters: {
        /**
        * data: 待处理数据
        * arr: 字典数组
        * key: 字典数组对应key
        * value: 字典数组key对应value
        */
        dictHandle(data, arr, key, value) {
            const ret = arr.find(p => p[key] === data) || {};
            return ret[value] || '';
        }
    }
};

二、引入并使用：

可以用在判断数据状态上，比如该条数据的状态是：待处理，处理中，已完成。

<template>
	<div>
		<div>{{data | dictHandle(arr, 'id', 'name')}}</div>
	</div>
</template>

<script>
// 导入过滤器混合器
import filters from '@/utils/filtersMixin';
export default {
    mixins: [filters],
	data() {
        return {
        	arr: [
                { id: 1, name: '待处理' },
                { id: 2, name: '处理中' },
                { id: 3, name: '已完成' },
            ],
            data: 2
        };
    }
};
</script>

此时，页面中将显示’处理中’。