Vue优化多个else if

最新推荐文章于 2024-05-14 21:04:35 发布

暴富的im

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量573

点赞数 11

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

本文链接：https://blog.csdn.net/qq_59626859/article/details/135337452

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

原代码：

原场景是在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 '--';
}