在工作中经常遇到一个场景,在表格数据与后台接口交互的过程中,某一列后台只会传一个code,但是实际上在表格上要展示的事code对应的描述值。
// 后台传来的数据:
tableData: [
{ userName: '张三', typeCode: '1' },
{ userName: '李四', typeCode: '2' }
],
// 类型对应表
typeOption: [
{ label: '类型一', value: '1' },
{ label: '类型二', value: '2' }
]
效果图:
这时候需要前端去讲typeCode转换成描述值,我本来想的是在接受数据的时候对每一个对象进行匹配,然后增加一个对象typeName
,在table中类型值一列绑定这个对象。但是看了大佬的代码之后,发现了一种更优雅的写法。
上代码
<div>
<el-table :data="tableData" border stripe>
<el-table-column label="用户姓名" prop="userName" />
<el-table-column label="类型值">
<template slot-scope="scope">{{ typeDesc(scope.row.typeCode) }}</template>
</el-table-column>
</el-table>
</div>
在计算属性中去进行转义
computed: {
typeDesc(val) {
return (val) => {
const target = this.typeOption.find(i => i.value === val)
return target ? target.label : ''
}
}
}