08_el-table 某列根据字典 渲染
1、el-table 表格
例:费用类别 字段 需要按照后端提供的字典 进行渲染 ,添加 :formatter=‘formatRelatedtype’
<el-table :data="tableData">
<el-table-column label="费用类别" :formatter="formatRelatedType" width="200" align="center" prop="relatedType"
show-overflow-tooltip />
<el-table-column label="所属单位" width="auto" align="center" prop="orgName" show-overflow-tooltip />
<el-table-column label="所属部门" width="200" align="center" prop="deptName" show-overflow-tooltip />
</el-table>
2、首先访问后端接口,拿到字典配置数据
// 查询费用类别
async selectCostControlTypeEnum() {
const res = await getcostControlTypeEnum()
if (res.code == 200) {
for (const [key, value] of Object.entries(res.data)) {
this.relatedTypeOptions.push({
value: key,
label: value
})
}
};
},
此时已经将 后端传递过来的字典 交给 vue 实例管理
3、编写 formatRelatedtype 函数
// 凭证状态 根据 字典 渲染
formatVoucherFlag(row, column) {
const option = this.payFlagOptions.find(item => item.value === row[column.property])
return option ? option.label : ''
},
这样表格中的 费用类别 根据后端 提供的数据 进行渲染,自动匹配