Vue.js中ag-grid单元格数据加粗失效问题求助

问题根源 #

ag-grid默认会自动转义单元格里的HTML内容，所以你把用bold()生成的带<b>标签的字符串放进rowData后，它会被当成纯文本显示，不会解析成加粗样式。

两种可行解决方案 #

1. 用HTML渲染器解析标签 #

在列定义里配置cellRenderer，让单元格识别并解析HTML：

// 写法一：自定义cellRenderer
const columnDefs = [
  {
    headerName: '目标列名',
    field: '对应字段名',
    cellRenderer: (params) => params.value // 直接返回带HTML的内容
  }
];

// 写法二：用ag-grid内置的HTML渲染器，更简洁
const columnDefs = [
  {
    headerName: '目标列名',
    field: '对应字段名',
    cellRenderer: 'html'
  }
];

2. 直接用cellStyle设置加粗（更简单） #

如果只是需要加粗效果，不需要其他HTML结构，直接通过样式配置实现，不用给值加标签：

const columnDefs = [
  {
    headerName: '目标列名',
    field: '对应字段名',
    cellStyle: { fontWeight: 'bold' }
  }
];

额外提醒 #

• 用HTML渲染器时，要确保内容安全，别直接渲染未过滤的用户输入，防止XSS风险。
• 先确认rowData里的值确实生成了<b>内容</b>的格式，可通过console.log(rowData)检查。

内容的提问来源于stack exchange，提问作者Salman.S