ag-Grid，使用材质图标进行单元格渲染 - vue

Posted 2023-03-28

【中文标题】ag-Grid，使用材质图标进行单元格渲染 - vue

【英文标题】：ag-Grid, cell rendering with material-icons - vue

【发布时间】：2021-03-15 15:35:27

【问题描述】：

我在 vuejs 项目中使用 ag-Grid。 我想渲染单元格以显示材质图标， 但是图标没有出现，只出现了图标名称：

这是“iconRender”组件：

function iconRender(params) 
  var spanElement = document.createElement("span");
  var textElement = document.createElement("span");
  textElement.innerhtml = params.value;
  var iconElement = document.createElement("i");
  iconElement.class = "material-icons";
  iconElement.style.color = params.color;
  iconElement.innerHTML = params.icon;
  spanElement.appendChild(iconElement);
  spanElement.appendChild(textElement);
  return spanElement;

这是 columnsDef:

 gridColumns() 
      return  [
            headerName: "Status",  field: "status", cellRenderer: 'iconRender', 
          cellRendererParams: (params) =>  return icon :'check_circle_outline', color: 'green',
         ]
         

我还在 index.html 文件中添加了 head 标签：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

当使用 ag-Grid 之外的 material-icon 时，它可以正常工作

【参考方案1】：

而不是 iconElement.class = "material-icons";

写 iconElement.className="material-icons";