全局常量的统一，及在eleemnt-ui表格中的格式化

在实际项目中遇到很多枚举的常量值，需要统一管理，在表格中需要把对应的值格式化成名称，以此记录：

1.在utils文件夹新建globalData.ts文件，用于存放全局的常量：

?

1 2 3 4

const gobalData = {     gradeList: [{ value: 1, name: '一等奖' }, { value: 2, name: '二等奖' }, { value: 3, name: '三等奖' },<br> { value: 4, name: '四等奖' }, { value: 5, name: '五等奖' }, { value: 6, name: '六等奖' }, { value: 7, name: '七等奖' },<br> { value: 8, name: '八等奖' }, { value: 9, name: '九等奖' }, { value: 10, name: '十等奖' },], } export default gobalData

2.在utils文件夹新建useFormatter.ts文件，对值进行格式化：

?

1 2 3 4 5 6 7

import gobalData from './globalData' export const formatterType=(row: any, key: any, prenatKey: any, val: any)=>{     // 枚举字段格式化     let newVal = row ? row[key] : val     if (!newVal && newVal !== 0) return     return gobalData[prenatKey].filter((item: any) => item.value == newVal)[0].name || '' }

3.在组件中使用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>  <div class="list">   <el-table v-loading="loading" :data="tableData" row-key="id" border max-height="540px">    <el-table-column prop="gradeType" label="奖级" align="center"     :formatter="($event: any) => formatterType($event, 'gradeType', 'gradeList', '')">    </el-table-column>    <el-table-column prop="gradeType" label="奖级" align="center">     <template #default="scope">      {{ formatterType('', 'gradeType', 'gradeList', scope.row.gradeType)" }}     </template>    </el-table-column>   </el-table>  </div> </template> <script lang="ts" setup> import { formatterType } from '/@/utils/useFormatter' import gobalData from '/@/utils/globalData'   </script> <style lang='postcss' scoped>   </style>