vue+element 表格formatter数据格式化并且插入html标签

可以使用 Element UI 表格的 `formatter` 属性来对数据进行格式化，同时也可以使用 Vue 的 `v-html` 指令来插入 HTML 标签。

例如，我们有一个表格列需要将数据格式化为带有颜色的文字，并且需要将文字加粗。可以使用以下代码实现：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="score" label="分数" :formatter="scoreFormatter"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '小明',
          age: 18,
          score: 90,
        },
        {
          name: '小红',
          age: 20,
          score: 80,
        },
      ],
    };
  },
  methods: {
    scoreFormatter(row, column, cellValue) {
      const color = cellValue >= 90 ? 'green' : 'red';
      const fontWeight = 'bold';
      return `<span style="color:${color}; font-weight:${fontWeight}">${cellValue}</span>`;
    },
  },
};
</script>

在上面的代码中，我们使用了 `scoreFormatter` 方法来格式化 `score` 列的数据。在该方法中，我们根据分数的大小来设置文字的颜色，同时将文字加粗。最后，我们使用 `<span>` 标签将格式化后的文字包裹起来，并使用 Vue 的 `v-html` 指令来插入 HTML 标签。