el-table使用formatter翻译字典值封装方法

做数据类统计页面中,时常会碰见需要根据管理平台中的字典,将el-table中的数据项进行翻译,若每个页面内都写一遍formatter方法又没必要,所以在此提供封装后的方法

1.el-table中使用formatter

//目标字典
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('');
}

具体翻译方法如何挂载全局就不做赘述了

个人做笔记之用,如果帮到你纯属意外∠( ᐛ」∠)_

你可能感兴趣的:(前端,jquery,html5)