Question

使用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 },

];

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

提前谢谢！

Answer 1

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

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

有了我们，我们不必在意向路由添加历史记录，这是“不好的”事情，如果您更改此路由，则也需要在此处进行更新。

Answer 2

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

我做了什么：

error[E0597]: `v` does not live long enough
 --> src/main.rs:3:26
  |
3 |     let test = Test { v: &v }; //inner_thread
  |                          ^^ borrowed value does not live long enough
4 |     std::thread::spawn(move || test.print());
  |     ---------------------------------------- argument requires that `v` is borrowed for `'static`
...
8 | }
  | - `v` dropped here while still borrowed

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

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

在Ag-grid cellRender中使用nuxt-link

2 个答案: