需求
后端返回的是0、1、2、3这样的数字,需要格式化成对应的汉字,还要根据内容来添加警告颜色。
使用:formatter属性只支持返回字符串。所以这里使用返回html方式解决
上代码
template
<el-table :data="state.tableData">
……
<el-table-column align="center" prop="compareResult" label="校核结果">
<template #default="scope"> <span v-html="resultFormat(scope.row.compareResult)"></span></template>
</el-table-column>
</el-table>
script
<script setup lang="ts">
const resultObj: { [key: string]: string } = {
0: "成功",
1: "数据不一致",
2: "数据缺失",
3: "数据冗余",
};
const resultFormat = (value: number) => {
if (value !== 0) {
return `<span class="warning">${resultObj[value]}</span>`;
} else {
return resultObj[value];
}
};
</script>