el-table展示枚举值

最新推荐文章于 2024-09-30 16:37:20 发布

hjt_未来可期

最新推荐文章于 2024-09-30 16:37:20 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/h_123456___/article/details/127864937

element-ui 专栏收录该内容

5 篇文章

订阅专栏

当后端返回的数据需要转换为枚举值才能在前端正确展示时，可以利用formatter函数进行处理。例如，在一个表格列中，通过遍历预定义的枚举列表，将接收到的key转换为对应的value，实现页面上显示预期的枚举名称。这种方法在处理字典映射时非常实用。

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

有时候，后端传回来的数据不能直接用，需要转一下，有些字典值，后端直接返回了key，
需要我们转成对应的value，这时候可以用官网给出的formatter函数

在这里插入图片描述

<el-table-column prop="sex" label="性别">
  <template slot-scope="scope">
    <span>{{sexFormat(scope.row.sex)}}</span>
  </template>
</el-table-column>
sexFormat (val) {
	let name = ''
	this.sexList.forEach(item => {
		if ( item.id === val ) {
			name = item.name
		}
	})
	return name
}