agGrid表格对同列不同数据添加不同背景色

最新推荐文章于 2025-11-16 12:57:57 发布

原创最新推荐文章于 2025-11-16 12:57:57 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#agGrid

本文介绍了一种在JS环境中，使用ag-Grid时自定义单元格渲染的方法，通过判断条件改变剧目名称单元格的颜色及样式，实现数据的视觉区分。

此环境就是js,没用vue react

展示：

//在cellRenderer回调里可以嵌入自己对某标签得操作
cellRenderer: (params) => {
    if (colDef.headerName=='剧目名称'&&this.data.parentTableId== "8174_vZhJu4jY8yfZpVTjkmsrhF"&&this.data.total>0) {
    if (myValue&&myValue=='三个和尚') {
        color = 'rgba(255,0,0,0.5)';
    }
    else {
        color='rgba(0,128,0,0.5)'
    }
    bgStyle = ' style = "display: block;padding: 0 8px;height: 100%;color:#fff;background:' + color + ';text-align:' + textAline + ';"';
    sHtml = '<span' + bgStyle + '>' + params.value + '</span>';
   }
   return sHtml 
}