vue 封装数据字典实现自定义翻译局部文本内容方法

布满荆棘的人生 2023-10-09 18:38 3阅读 0赞

![35f1d83b4960900ae6d8249100b2b2be.jpeg][]

核心方法：`Object.keys` 返回一个所有元素为字符串的数组，其元素来自于从给定的`object`上面可直接枚举的属性。

当初也考虑过使用Vue自定义指令的方式，但是又考虑到自定义指令获取到标签的文本内容可能无法和自己封装的数据字典匹配上，比如有的标签内容是：data\_transform算子，但是数据字典里面只有data\_transform的键值对，所以就无法完全匹配上，除非是再使用正则表达式来匹配然后替换，但是这样又很麻烦，如果匹配不准确等情况，所以决定给Vue对象添加自定义函数来处理

// simple array
    var arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']
    
    // array like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']
    
    // array like object with random key ordering
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']

utils文件夹下新建 index.js中封装方法

// 回显分类字典
    export function selectClassFlyDict(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
            if (datas[key].code == ('' + value)) {
                actions.push(datas[key].name);
                return true;
            }
        })
        return actions.join('');
    }

main.js中引入 并在全局挂在 方便后续通用

import { selectClassFlyDict } from "@/utils/index";
    // 全局方法挂载
    Vue.prototype.selectClassFlyDict = selectClassFlyDict

在组件里面调用

<el-table-column label="申报来源" align="center" prop="declSource" 
    v-if="columns[39].visible" width="200">        
        <template slot-scope="scope">     
        {
       { sourceClassify(scope.row.origin) }}/{
       { sourceClassify(scope.row.originDetail)}}        
        </template>      
    </el-table-column>
     
    
    methods: {
           // 翻译来源
           sourceClassify(value){
               return this.selectClassFlyDict(this.sourceList,value);
           },     
    }

[35f1d83b4960900ae6d8249100b2b2be.jpeg]: https://img-blog.csdnimg.cn/img_convert/35f1d83b4960900ae6d8249100b2b2be.jpeg