背景
在crm中稀拐，table展示時实幕，字段返回的是value，而希望展示成label钝诚，此時可以用一個valueToLabel過濾器進行轉(zhuǎn)換。
使用
<el-table-column prop="status" :label="$t('advert.itemStatus')" align="center">
<template slot-scope="scope">
{{ scope.row.status | valueToLabel($t('data.statusList')) }}
</template>
</el-table-column>
<el-table-column :label="'APP'" prop="appId" width="100" align="center">
<template slot-scope="scope">
{{ scope.row.appId | valueToLabel(dic_apps, 'name', 'value') }}
</template>
</el-table-column>
valueToLabel實現(xiàn)
/**
* 通過val匹配與arr中與valueKey的值相同的數(shù)據(jù)榄棵，并返回labelKey對應的值
* @param {*} arr 數(shù)據(jù)列表
* @param {*} val 值
* @param labelKey 需要返回的數(shù)據(jù)key 默認為 label
* @param valueKey val對應的數(shù)據(jù)key 默認為 value
*/
export function valueToLabel(val, arr, labelKey, valueKey) {
let label = '';
if (val === '' || val === null || !arr instanceof Array || arr.length == 0) {
return '';
}
labelKey = labelKey || 'label';
valueKey = valueKey || 'value';
const item = arr.find(obj => obj[valueKey] === val);
if (item && item[labelKey] !== undefined) {
label = item[labelKey];
} else {
label = val;
}
return label;
}
arrToLabel實現(xiàn)
有時凝颇，table字段返回的是一個value數(shù)組，或者拼的字符串疹鳄，依然希望轉(zhuǎn)成對應的lable拧略。在valueToLabel的基礎(chǔ)上處理一下即可。
export function arrToLabel(val, arr, labelKey, valueKey, defaultVal) {
let arr_r = []
let val_arr = val instanceof Array ? val : val==null ? [] : val.split(',')
for (let i = 0; i < val_arr.length; i++) {
const element = val_arr[i];
let label = valueToLabel(element, arr, labelKey, valueKey, defaultVal)
arr_r.push(label)
}
return arr_r.join(',')
}
