Использование nuxt-ссылки в ag-grid Row - PullRequest
Новая
       19

Использование nuxt-ссылки в ag-grid Row

0 голосов
/ 10 июля 2019

Используя таблицу ag-grid, я пытаюсь использовать cellRender для маршрутизации всей строки таблицы на нужную страницу. Немного неясно, как это сделать с помощью nuxt-ссылки.

Путь, на который должна ссылаться строка (ячейка) 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 },

];

Как лучше всего реализовать ссылки такого рода для всей строки?

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 26 июля 2019

Я смог программным способом перейти на другую страницу, щелкая строку.Но параметры все еще видны в моей ссылке в браузере.

Что я сделал: 

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

Это дает мне следующий URL в браузере 

users/$%7Bparams.data.id%7D/overview
0 голосов
/ 12 июля 2019

В этом случае мы можем просто смоделировать HTML, как это делает nuxt-ссылка: 

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

Поскольку нам не нужно заботиться о добавлении истории в маршрут, «плохая» вещь этоесли вы измените этот маршрут, вам также необходимо обновить его здесь.

...