el-table-column :formatter v-html 如何同时使用 ，案例

`el-table-column` 是 Element UI 中表格组件 `el-table` 的列配置选项之一，其中的 `formatter` 属性用于自定义单元格的内容渲染。当你想要在单元格中插入 HTML 代码时，可以使用 `v-html` 指令，它允许 Vue.js 渲染 HTML 内容。

例如，在一个简单的表格中，如果你有一组数据包含一些需要格式化的字符串，如带有链接的文字，你可以这样做：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column
      prop="content"
      label="内容"
      formatter="formatContent"
      :formatter="{
        v-if: item.content && item.content.includes('<a>'),
        handler: (value) => {
          return `<span v-html="${value}"></span>`;
        }
      }"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', content: '查看我的网站<a href="#">点击这里</a>' },
        // 更多数据...
      ]
    };
  },
  methods: {
    formatContent(value) {
      return this.$options.formatter.handler(value); // 使用绑定的函数处理值
    }
  }
};
</script>

在这个例子中，`formatter` 配置了一个条件判断（`v-if`），当内容包含 `<a>` 标签时，会调用自定义的 `handler` 函数。这个函数使用 `v-html` 指令将包含的 HTML 显示出来。