vue 业务页面状态展示的优化

背景说明

在后台管理项目中，一些业务Table页面需要对状态进行展示。在初学前端时，常使用的方式就是三元表达式或者if-else进行展示，但是对于状态值较多或者全局使用时，三元表达式和if-else的使用就不够简洁和不便维护了。

优化前的写法

三元表达式：

// Table 状态展示
 <el-table>
    ...
 	<template #default="scope">
 	  <span>{{scope.row === 1?'待确认':scope.row === 2?'已确认':'已完成'}}</span>
   </template>
 </el-table>

if-else：不同状态展示不同颜色

// Table 状态展示
 <el-table>
    ...
 	<template #default="scope">
 	  <span v-if="scope.row === 1" class="color-red">待确认</span>
 	  <span v-if="scope.row === 2" class="color-blue">已确认</span>
 	  <span v-else class="color-green"已完成</span>
   </template>
 </el-table>

优化后的写法

对上述的两种方式其实可以进行做一个管理，简化代码并且方便维护。单页面使用的状态就写在当前页面即可，全局需要使用的可以新建一个文件用来管理。

1. 在你的方法文件夹里新建一个getStatus.js

export function getStatus(val) {
  const map = { 1: ['danger', '待确认'],  2: ['primary', '已确认'], 3: ['success', '已完成'] }
  return map[val]
  // 当val值为负数时，需要加上'',写成字符串的格式，否则会报错！
}

2. 在main.js全局注册(单页面使用忽略此步骤)

import {getStatus} from '@/utils/getStatus'
Vue.prototype.getStatus= getStatus

3. 页面使用

// Table 状态展示
 <el-table>
    ...
 	<template #default="scope">
 	  <el-text :type="getStatus(scope.row.status)[0]">{{getStatus(scope.row.status)[1]}}</el-text>
   </template>
 </el-table>