背景

在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(',')
}