Vue优化多个else if

暴富的im

已于 2024-11-16 16:17:39 修改

阅读量767

点赞数 11

分类专栏：前端文章标签： vue.js javascript 前端开发语言

于 2024-01-02 11:59:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59626859/article/details/135337452

版权

前端专栏收录该内容

72 篇文章

订阅专栏

文章讲述了在Vue组件中，如何将原有的if-elseif-else嵌套结构优化为数据驱动的方法，通过定义对象映射和函数，减少代码冗余，提高可维护性。涉及到了`comanyNameList`和`picList`的数据结构，以及`enableStateTypeMap`和`disabledStateTypeMap`的状态映射表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原代码：

原场景是在mouted里面对多个else if进行判断。

     if (this.$route.query.comanyName === '平安') {
            this.params.productCode = 'PN';
            this.insuranceCompany = this.pinganLogo;
        } else if (this.$route.query.comanyName === '人保') {
            this.params.productCode = 'RB';
            this.insuranceCompany = this.piccLogo;
        } else if (this.$route.query.comanyName === '众安') {
             this.params.productCode = 'ZA';
            this.zhongLogoShow = true;
        } else if (this.$route.query.comanyName === '大地') {
           this.params.productCode = 'DD';
           this.insuranceCompany = this.dadiLogo;
    }

优化代码：

在data里面

    comanyNameList: {
                '平安 ': 'PN',
                '人保 ': 'RB',
                '众安 ': 'ZA',
                '大地': 'DD',
            },
            picList: {
                '平安': pinganLogo,
                '人保': piccLogo,
                '大地': dadiLogo,
            }

mouted里面

     let obj = this.showDetail(this.$route.query.comanyName)
        this.params.productCode = obj.productCode
        this.insuranceCompany = obj.insuranceCompany

方法里面

    showDetail(comanyName) {
            let obj = {
                productCode: this.comanyNameList[comanyName],
                insuranceCompany: this.picList[comanyName]
            }
            return obj
        },

同理可优化其他判断逻辑

if (row.tianrunStatus == true) {
  if (row.tianrunSyncStatus == 'APPLYING') {
    return '启用(申请中)'
  } else if (row.tianrunSyncStatus == 'APPLY_FAILURE') {
    return '启用(申请失败)'
  } else if (row.tianrunSyncStatus == 'APPLY_SUCCESS') {
    return '启用(申请成功)'
  } else if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '启用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '启用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '启用(同步失败)'
  } else {
    return '启用'
  }
} else if (row.tianrunStatus == false) {
  if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '禁用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '禁用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '禁用(同步失败)'
  } else {
    return '禁用'
  }
} else {
  return '--'
}

优化：

const enableStateTypeMap = {
  'APPLYING': '启用(申请中)',
  'APPLY_FAILURE': '启用(申请失败)',
  'APPLY_SUCCESS': '启用(申请成功)',
  'SYNCHRONIZING': '启用(同步中)',
  'SYNC_SUCCEEDED': '启用(同步成功)',
  'SYNC_FAILED': '启用(同步失败)',
}

const disabledStateTypeMap = {
  'SYNCHRONIZING': '禁用(同步中)',
  'SYNC_SUCCEEDED': '禁用(同步成功)',
  'SYNC_FAILED': '禁用(同步失败)',
}
/** 状态code判断返回中文描述 */
export const statusJudgmentFun = (status, syncStatus) => {
  if (status == true) {
    const syncStatusText = enableStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '启用'
  } else if (status == false) {
    const syncStatusText = disabledStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '禁用'
  } else {
    return '--'
  }
}
/** 使用 */
statusJudgmentFun(row.tianrunStatus,row.tianrunSyncStatus)

switch用法

if(row.tianrunStatus === true){
switch(row.tianrunSyncStatus){
case 'APPLYING':
return '启用(申请中)';
case 'APPLY_FAILURE':
return '启用(申请失败)';
case 'APPLY_SUCCESS':
return '启用(申请成功)';
case 'SYNCHRONIZING':
return '启用(同步中)';
case 'SYNC_SUCCEEDED':
return '启用(同步成功)';
case 'SYNC_FAILED':
return '启用(同步失败)';
default:
return '启用';
}
} else if(row.tianrunStatus === false){
switch(row.tianrunSyncStatus){
case 'SYNCHRONIZING':
return '禁用(同步中)';
case 'SYNC_SUCCEEDED':
return '禁用(同步成功)';
case 'SYNC_FAILED':
return '禁用(同步失败)';
default:
return '禁用';
}
} else{
return '--';
}

示例二

      if (item.province) {
                     if (item.province == '上海市' || item.province == '天津市' || item.province == '北京市' || item.province == '重庆市') {
                         item.province = item.province.replace('市', '')
                     } else if (item.province == '内蒙古自治区' || item.province == '西藏自治区') {
                         item.province = item.province.replace('自治区', '')
                     } else if (item.province == '广西壮族自治区' || item.province == '新疆维吾尔自治区' || item.province == '宁夏回族自治区') {
                         item.province = item.province.slice(0, 2)
                     } else {
                         item.province = item.province.replace('省', '')
                     }
                     this.map.series[0].data.push({
                         name: item.province,
                         value: item.loanCount
                     });

                }

优化版

                    const provinceMapping = {
                        '上海市': '上海',
                        '天津市': '天津',
                        '北京市': '北京',
                        '重庆市': '重庆',
                        '内蒙古自治区': '内蒙古',
                        '西藏自治区': '西藏',
                        '广西壮族自治区': '广西',
                        '新疆维吾尔自治区': '新疆',
                        '宁夏回族自治区': '宁夏'
                    };
                    item.province = provinceMapping[item.province] || item.province.replace(/自治区|省/g, '');
                    this.map.series[0].data.push({
                        name: item.province,
                        value: item.loanCount
                    });