在实际项目中遇到很多枚举的常量值,需要统一管理,在表格中需要把对应的值格式化成名称,以此记录:
1.在utils文件夹新建globalData.ts文件,用于存放全局的常量:
const gobalData = { gradeList: [{ value: 1, name: '一等奖' }, { value: 2, name: '二等奖' }, { value: 3, name: '三等奖' },
{ value: 4, name: '四等奖' }, { value: 5, name: '五等奖' }, { value: 6, name: '六等奖' }, { value: 7, name: '七等奖' },
{ value: 8, name: '八等奖' }, { value: 9, name: '九等奖' }, { value: 10, name: '十等奖' },], } export default gobalData
2.在utils文件夹新建useFormatter.ts文件,对值进行格式化:
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.在组件中使用:
<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>
标签:格式化,name,utils,value,ui,gobalData,any,eleemnt From: https://www.cnblogs.com/foxing/p/16858424.html