ag-Grid，带有 material-icons 的单元格渲染 - vue

Question

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

这是 '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;
}

这是列定义：

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

我还添加到 head 标签下的 index.html 文件：

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

在 ag-Grid 中使用 material-icon 时它工作正常

Answer 1

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

写iconElement.class名称= "material-icons";