el-table表格展示并写入枚举值（formatter）

最新推荐文章于 2024-03-12 09:49:26 发布

F N Nancy

最新推荐文章于 2024-03-12 09:49:26 发布

阅读量2.9k

点赞数 1

分类专栏：笔记 elementui 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/NancyFyn/article/details/127389864

版权

笔记同时被 2 个专栏收录

35 篇文章

订阅专栏

elementui

11 篇文章

订阅专栏

这篇博客介绍了如何在前端表格中处理后端传递的枚举值，通过formatter函数将枚举值转换为友好的字段名称。示例代码展示了在el-table-column中使用formatter或slot-scope进行数据转换的方法，并提供了处理枚举值的sourceFormat函数实现。

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

正常情况下，表格展示的都是我们传给后台的数据，但是也有特殊情况，传的是枚举值，后端给到前端的也是枚举值，这样就需要我们去做处理了。这里可以结合 formatter 函数。

<el-table-column prop="processField" label="时间字段" :formatter="sourceFormat"></el-table-column>

或

<el-table-column prop="processField" label="字段">
   <template slot-scope="scope">
      <span>{{sourceFormat(scope.row.processField)}}</span>
   </template>
</el-table-column>

方法里面

获取字段名称，这里各种输出都可以看到输出的值是正确的，但是去看页面各种写不进去；

sourceFormat(val) {
        this.brandList.forEach(item => {
            if(item.brandId == val) {
                  return  item.brandName
            }
        })
    },

通过局部存储，最后返回（return）就可以了。

sourceFormat(val) {
    // 可以输出看下 val 是什么，方便匹配；
    // :formatter="sourceFormat"    val 就应该是 val.processField
      let branchName = ''
      this.brandList.forEach(item => {
            if(item.brandId == val) {
                branchName = item.modelName
            }
        })
          return branchName
    },