在 ag-grid 行中使用 nuxt-link答案

【问题标题】：Using nuxt-link in ag-grid Row在 ag-grid 行中使用 nuxt-link
【发布时间】：2019-11-20 02:02:15
【问题描述】：

使用 ag-grid 表我正在尝试使用 cellRender 将整个表行路由到正确的页面。有点不清楚如何使用 nuxt-link 做到这一点。

ag-grid 行（单元格）应链接到的路径如下：

<nuxt-link :to="'users/' + id + '/overview' ">

现在我根据目前找到的信息创建了一个带有路由名称的 cellRender。

this.columnDefs = [
  {
    headerName: "ID",
    field: "id",
    cellRenderer: params => {
      const route = {
        name: "users", // This path should redirect to <nuxt-link :to="'users/' + id + '/overview' ">
        params: { id: params.value }
      };

      const link = document.createElement("a");
      link.href = this.$router.resolve(route).href;
      link.innerText = params.value;
      link.addEventListener("click", e => {
        e.preventDefault();
        this.$router.push(route);
      });
      return link;
    }
  },
  {
    headerName: "Naam",
    field: "naam",
    checkboxSelection: true,
    sortable: true,
    headerCheckboxSelection: true
  },
  { headerName: "Type", field: "type", sortable: true },
  { headerName: "Status", field: "status", sortable: true },
  { headerName: "Laatste Contact", field: "contact", sortable: true },

];

为整行实现此类链接的最佳方法是什么？

提前致谢！

【问题讨论】：

标签： vue.js vue-router ag-grid nuxt.js

【解决方案1】：

在这种情况下，我们可以像 nuxt-link 那样模拟 HTML：

cellRenderer: (params) => {
        return `<a href="/users/${params.value}/overview">${params.value}</a>`;
      }

由于我们不需要关心向路线添加历史记录，“坏”的事情是，如果您更改此路线，您还需要在此处更新。

【讨论】：

我发现对于整行我应该使用 onRowClicked 来代替。

【解决方案2】：

我能够在单击一行时以编程方式链接到另一个页面。但参数在我浏览器的链接中仍然可见。

我做了什么：

this.gridOptions.onRowClicked = params => {
  this.$router.push({
    path: "/users/${params.data.id}/overview"
  });
};

这在浏览器中为我提供了以下网址

users/$%7Bparams.data.id%7D/overview

【讨论】：