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

Question

我在 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'}}}, ] }

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

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

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

Answer 1

而不是 iconElement。 class = "材料图标";

写图标元素。 className = "材料图标";