封裝返回類型映射方法

vue3 貌似沒有filter方法 所以你就算在寫vue2也別用filter了 直接用這種方法吧

// 獲取類型映射
const returnType = (list, value, name, code) => {
    for (let i = 0; i < list.length; i++) {
        if (list[i][code] === value) {
            return list[i][name];
        }
    }
};
// 例: 映射表 通常會集中放在一個地方 這里單獨拿出示范
const statusList = [
  { label: "低", value: 0 },
  { label: "中", value: 1 },
  { label: "高", value: 2 },
];
// 調(diào)用
<template>
    <span>{{ returnType(statusList, scope.record.status, 'label', 'value') }}</span>
</template>

這一陣react也簡單寫了個方法 其實vue react都是一樣用的 先放在這里記錄一下

/**
 * 對應(yīng)label展示
 * @param list 枚舉列表 array
 * @param findKey 需要找到的值 array | string
 * @param keyCode list中根據(jù)此值查找當(dāng)前項
 * @param keyName 需要返回展示的字段值
 * @param needJoin 是否需要展示分割
 * @returns array | string
 */
export const mappingRelation = (
  list: any[],
  findKey: number | string | any,
  keyCode: number | string,
  keyName: number | string,
  needJoin: string,
) => {
  let value = null;
  if (Array.isArray(findKey)) {
    value = [];
    let findValue = '';
    findKey.map((keyItem: any) => {
      let hasName = list.some((item) => {
        if (item[keyCode] === keyItem) {
          findValue = item[keyName];
          return true;
        }
      });
      if (!hasName) {
        findValue = '其他';
      }
      value.push(findValue);
    });
  } else {
    let hasName = list.some((item) => {
      if (item[keyCode] === findKey) {
        value = item[keyName];
        return true;
      }
    });
    if (!hasName) {
      value = '其他';
    }
  }
  if (needJoin) {
    return value.join(needJoin);
  }
  return value;
};


mappingRelation(list,  findArr, 'value', 'label', '、'),
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容