在工作中,经常后端接口返回的某些字段是数字,需要前端做一下处理,把每个数字对应的文字渲染到表格中。本篇文章就是学习如何实现该功能的:
博主「阿林阿林」的原创文章
原文链接:https://blog.csdn.net/qq_41793354/article/details/121636702
以下是对后端返回的字段没有做处理直接渲染的结果,可以看到我们需要的操作详情字段是一个数字,但是我们需要将它变成文字展示表格中
下面直接上代码
template:
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="operTime" label="操作时间" />
<el-table-column prop="accountName" label="用户名" />
<el-table-column prop="operName" label="姓名" />
<el-table-column prop="operModule" label="操作模块" />
<el-table-column prop="businessType" label="操作详情">
<template #default="scope">
{{getLabel(operDetails, scope.row.businessType, 'businessType', 'businessLabel')}}
</template>
</el-table-column>
</el-table>
js:
// 操作详情的编号
const operDetails = [
{businessType: 0,businessLabel: '其他' },
{businessType: 1,businessLabel: '新增'},
{businessType: 2,businessLabel: '修改'},
{businessType: 3,businessLabel: '删除'},
{businessType: 4,businessLabel: '查看' }
]
/**
* 根据传入的值,返回对应的中文name,常用的地方是表格
* list: 传入的源数组
* id: 传入的值
* value: 源数组中为了匹配id值的字段名称
* label: 源数组中需要返回显示中文的字段名称
* 示例:arr:[{businessType: 0,businessLabel:'其他'},{businessType: 1,businessLabel:'新增'}]
* 调用getLabel(arr, 1, "businessType", "businessLabel")返回 新增
* */
// 根据后端返回的数字编码,显示相应的文字
const getLabel=(list, id, value, label)=> {
if (id != '' && Array.isArray(list) && list.length != 0) {
return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label]
} else {
return id
}
}
最终效果: