Tabulator 4.9 如何实现单个单元格内显示两种不同颜色的文本

实现方案 #

你不需要在mutator中直接拼接纯文本，而是通过输出带样式标签的内容即可实现同一单元格内不同文本的颜色区分，分不同场景的实现方式如下：

• 通用HTML渲染场景（适用于支持单元格HTML解析的表格组件）
  直接在mutator中返回拼接了带行内样式的HTML字符串即可，示例代码：

// 示例mutator逻辑
function cellValueMutator(comment, description) {
  // 给Comment字段套红色样式的span标签
  return `<span style="color: #ff0000;">${comment}</span> ${description}`
}

使用该方案需要先开启对应表格组件的允许单元格渲染HTML配置，主流表格库如AG Grid、Bootstrap Table等均支持该配置。

• Vue技术栈（Element UI / Ant Design Vue 等组件库）
  推荐使用框架自带的自定义单元格插槽实现，规避XSS风险：

<el-table-column prop="content" label="业务内容">
  <template #default="scope">
    <span style="color: red;">{{ scope.row.Comment }}</span>
    <span style="color: #000;">{{ scope.row.Description }}</span>
  </template>
</el-table-column>

• React技术栈（Ant Design / MUI 等组件库）
  在表格列配置的render回调中返回React节点即可：

const tableColumns = [
  {
    title: '业务内容',
    key: 'content',
    render: (_, row) => (
      <>
        <span style={{ color: 'red' }}>{row.Comment}</span>
        <span>{row.Description}</span>
      </>
    )
  }
]

注意事项 #

如果使用HTML字符串拼接的方案，需要确保Comment、Description字段的内容是经过安全校验的，避免恶意脚本注入导致XSS漏洞，优先选择框架原生的自定义渲染方案安全性更高。

内容的提问来源于stack exchange，提问作者Matt