做数据类统计页面中,时常会碰见需要根据管理平台中的字典,将el-table中的数据项进行翻译,若每个页面内都写一遍formatter方法又没必要,所以在此提供封装后的方法
1.el-table中使用formatter
<el-table-column prop="value" label="目标" :formatter="dictionartsTranslate">
//目标字典
dictionary: [{
key: '是',
label: 'yes'
}, {
key: '否',
label: 'no'
}]
2.页面内formatter使用的翻译方法dictionartsTranslate
dictionartsTranslate(row){
//此处this.dictionary为你的目标字典
//row.value为你想要的翻译的字典值,对应上方prop的内容
return this.$translateDic(this.dictionary, row.value);
},
3.全局使用的翻译方法,应封装于utils的公共js中
export function translateDic(datas, value) {
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
return actions.join('');
}
具体翻译方法如何挂载全局就不做赘述了
个人做笔记之用,如果帮到你纯属意外∠( ᐛ」∠)_