我如何从 Cell Renderer - ag grid 调用函数

Question

我在 vue.js 中使用 cellrenderer，我想从单元格渲染器调用函数。

附上我的代码：

gridColumns() {
  return [{
      headerName: "Actions",
      cellRenderer: 'iconRender',
      width: 140,
      cellRendererParams: (params) => {
        return {
          icon: ['edit', 'delete_forever'],
          color: 'gray'
        }
      }
    },
    {
      headerName: "Name",
      field: "name"
    },
    {
      headerName: "Artiyfactory Name",
      field: "artifactoryName"
    },
    {
      headerName: "Artifact Type",
      field: "artifactType"
    },
    {
      headerName: "Deployment Action",
      field: "deploymentAction"
    },
    {
      headerName: "Location",
      field: "usage.location"
    },
    {
      headerName: "Destenition On Setup",
      field: "usage.destOnSetup"
    },
  ]
}
},

function iconRender(params) {
  var spanElement = document.createElement("span");
  var textElement = document.createElement("span");
  if (params.value != undefined) {
    textElement.innerHTML = " " + params.value;
    textElement.style.verticalAlign = "middle";
  }
  params.icon.forEach(element => {
    var iconElement = document.createElement("i");
    iconElement.className = "material-icons";
    iconElement.style.color = params.color;
    iconElement.style.verticalAlign = "middle";
    iconElement.innerHTML = element;
    spanElement.appendChild(iconElement);
  });
  spanElement.appendChild(textElement);
  return spanElement;
}

我想从图标元素调用一个函数，我尝试了几种方法但对我没有任何作用。

你能看一看并告诉我该怎么做吗？

谢谢:)

Answer 1

而不是通过 dom 创建元素。您可以为单元格创建客户组件。在 ag-grid 中，当您单击单元格时，它只会捕获单元格的事件，而不是单元格内部的事件（在您的情况下是图标）。您可以为渲染的单元格创建自定义组件，并且可以像普通组件一样执行所有操作。请参考 [https://plnkr.co/edit/3nZPzwmGufKGXwvn] 我对 plunker 发表评论请参考他们有按钮的最后一列。

我如何从 Cell Renderer - ag grid 调用函数

How do i call function from Cell Renderer - ag grid

cellrenderer

vue.js

ag-grid