FormatData 配置项

应用场景

在前端开发中，我们经常会遇到数值转换问题。

比如：性别（女/男）以及各种枚举等，数据库中一般以 int 类型进行存储。

而数据回写时，需要前端将 int 类型转换成对应的汉字。

优秀的写法当然是将转换函数写到统一的工具类中，再通过 export 进行导出：

@/utils/format.ts

/**
 * 格式化性别
 * @param val
 * @returns string
 */
export const formatSex = (val: number | undefined): string => {
  switch (val) {
    case 1:
      return '男'
    case 0:
      return '女'
  }
  return '--'
}

/**
 * 格式化性别
 * @param val
 * @returns string
 */
export const formatSex = (val: number | undefined): string => {
  switch (val) {
    case 1:
      return '男'
    case 0:
      return '女'
  }
  return '--'
}

然后在需要使用的地方进行引入

@/views/xxxxx.vue

vue

<div>
  <span>用户性别:</span>
  <span>{{ formatSex(1) }}</span>
</div>

<script setup lang="ts">
import { formatSex } from '@/utils/format.ts'
</script>

<div>
  <span>用户性别:</span>
  <span>{{ formatSex(1) }}</span>
</div>

<script setup lang="ts">
import { formatSex } from '@/utils/format.ts'
</script>

优化 & 使用

尽管上面的写法已经趋于完美，但我依然觉得在使用的时候还是不太方便，每次使用都要 import 引入。再考虑到项目时间紧，任务重（外包/小项目一般 1-2 周一个，时间非常紧），我就在想能否再简化些？能否我在配置中只需要写一个 format: 'formatSex' , 组件就能自动的格式化？

由此 formatData 配置项应运而生...

注册时传入 formatData

//...
// 引用上文定义的函数
import * as formatData from '@/utils/format'

app.use(ElPlusCrud, {}, readonly(formatData))

//...
// 引用上文定义的函数
import * as formatData from '@/utils/format'

app.use(ElPlusCrud, {}, readonly(formatData))

在页面中的使用

html

<div>
  <span>用户性别:</span>
  <ElPlusFormText :modelValue="1" :desc="{ format: 'formatSex' }" />
</div>

<div>
  <span>用户性别:</span>
  <ElPlusFormText :modelValue="1" :desc="{ format: 'formatSex' }" />
</div>

*以上仅展示了组件独立使用的情况，结合表单效果更佳~

FormatData 配置项 ​

应用场景 ​

优化 & 使用 ​

FormatData 配置项

应用场景

优化 & 使用