首页 > 其他分享 >全局常量的统一,及在eleemnt-ui表格中的格式化

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

时间:2022-11-04 17:15:30浏览次数:45  
标签:格式化 name utils value ui gobalData any eleemnt

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

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

相关文章