背景
在crm中，table展示时，字段返回的是value，而希望展示成label，此时可以用一个valueToLabel过滤器进行转换。
使用
<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实现
/**
* 通过val匹配与arr中与valueKey的值相同的数据，并返回labelKey对应的值
* @param {*} arr 数据列表
* @param {*} val 值
* @param labelKey 需要返回的数据key 默认为 label
* @param valueKey val对应的数据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实现
有时，table字段返回的是一个value数组，或者拼的字符串，依然希望转成对应的lable。在valueToLabel的基础上处理一下即可。
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(',')
}
