el-table-column formatter 如何支持 html标签和样式

`el-table-column` 的 `formatter` 属性允许你在表格列数据展示时进行自定义格式化，包括支持 HTML 标签和样式。当你设置 `formatter` 为一个函数，它会接收当前行的数据 (`row`) 和对应的单元格值 (`cell)`, 并返回渲染后的字符串。这个过程通常涉及模板字符串（template literals）和返回包含 HTML 结构的内容。

例如：

<el-table-column label="姓名" prop="name" formatter="formatName"></el-table-column>
...
formatName(row, cell) {
  return `<span style="color: red;">${cell}</span>`;
}

在这个例子中，`name` 字段的值会被包裹在一个红色的 `<span>` 标签内，`style` 属性用于添加样式。

如果你想动态应用样式，可以访问并修改返回的 DOM 元素，例如：

formatName(row, cell) {
  const span = document.createElement('span');
  span.textContent = cell;
  span.style.color = row.color; // 假设 color 是数据的一部分
  return span.outerHTML;
}

这里创建了一个新的 `<span>` 并设置了它的颜色属性。

注意：在实际应用中，确保处理好安全问题，防止 XSS 攻击。如果数据来源于不可信源，应当对插入到 HTML 中的部分进行适当的转义。