前端展示状态属性，状态数字转为文字说明，利用枚举、Map,方便维护

最新推荐文章于 2024-06-09 22:37:48 发布

原创最新推荐文章于 2024-06-09 22:37:48 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

111 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用枚举和Map将前端状态数字转换为文字说明的方法。通过创建枚举类并将其应用到表格中，实现了状态的清晰展示，提高了代码的可维护性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端展示状态属性，状态数字转为文字说明，利用枚举、Map,方便维护

创建枚举类
Demo文件位置
引用枚举类
页面效果

创建枚举类

在enums包下创建JS文件，运用Map把数字对应的说明一一对应，key为状态数字,value为文字说明

export default class BuyerEnums {
  static isBuyer(val) {
    const map = new Map()
    map.set('1', '购方')
    map.set('2', '售方')
    return map.get(val)
  }
}

Demo文件位置

在这里插入图片描述

引用枚举类

在要转换的el-table-column 加上:formatter=“方法名” 属性默认会传一个val为当前实体

<el-table-column prop="isPub" label="是否发布" align="center" :formatter="ispPub" />

引用枚举类通过数字状态返回文字

 methods: {
    ispPub(val) {
      return PubEnums.isPub(val.isPub)
    }
  }

页面效果

页面数据

 methods: {
    tableData: [{
        name: '张三',
        isPub: '0',
        isBuyer: '1'
      }, {
        name: '张三',
        isPub: '1',
        isBuyer: '2'
      }, {
        name: '张三',
        isPub: '1',
        isBuyer: '1'
      }, {
        name: '张三',
        isPub: '0',
        isBuyer: '2'
      }, {
        name: '张三',
        isPub: '1',
        isBuyer: '2'
      }, {
        name: '张三',
        isPub: '0',
        isBuyer: '1'
      }]