vue+element-plus el-table表格slot传入动态html内容

需求

后端返回的是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>