vue3+TS+Element Plus table formatter函数返回html内容

在 Vue3 中结合 TypeScript 和 Element Plus 的表格组件 (Table) 使用时，`formatter` 函数通常用于自定义单元格的内容渲染。这个函数接收原始数据作为参数，并返回一个 HTML 字符串来替换表格中的默认显示。

例如，假设你有一个用户对象，包含 `name` 和 `age` 属性，你想以 `<span>` 标签高亮显示用户的姓名：

interface User {
  id: number;
  name: string;
  age: number;
}

// 定义 formatter 函数
function userFormatter(user: User): string {
  const html = `<span class="highlight">${user.name}</span>`;
  return html;
}

// 在模板中使用 formatter
<el-table-column label="姓名" prop="name" :formatter="userFormatter"></el-table-column>

在这个例子中，`userFormatter` 接收一个 `User` 类型的对象并返回一个包含高亮名的 HTML 字符串。然后在 Table 组件中通过 `:formatter` 指令应用这个函数。