Как добавить ссылку vue-router в столбец ag-grid-vue? - PullRequest
Новая
       93

Как добавить ссылку vue-router в столбец ag-grid-vue?

0 голосов
/ 31 августа 2018

документация ag-grid-vue с сайта ag-grid ясно говорит:

Вы можете предоставить ссылки на Vue Router в Grid, но вам нужно убедитесь, что вы предоставляете маршрутизатор для создаваемого компонента сетки.

с кодом образца: 

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the Grid
{
    headerName: "Link Example",
    cellRendererFramework: 'link-component',
    width: 200
}

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

https://github.com/ag-grid/ag-grid-vue/issues/1

https://github.com/ag-grid/ag-grid-vue/issues/23

https://github.com/ag-grid/ag-grid-vue-example/issues/3

https://forum.vuejs.org/t/vue-cant-find-a-simple-inline-component-in-ag-grid-vue/21788/10

Работает ли ag-grid-vue с vue-router, тогда как, или это просто устаревшая документация? Некоторые люди утверждают, что это работает для них, поэтому я предполагаю, что это сработало в один момент.

Я не ищу крутой ответ на данный момент. Я просто хочу знать, возможно ли это. Я попытался передать маршрутизатор с помощью окна или созданного (), и до сих пор ни один не работал.

Спасибо!

1 Ответ

0 голосов
/ 06 сентября 2018

подход, предложенный @thirtydot, работает хорошо. Единственным недостатком было то, что пользователь не может щелкнуть правой кнопкой мыши, но я обнаружил, что вы можете просто определить ссылку href. Поэтому, когда вы щелкаете левой кнопкой мыши, прослушиватель событий использует маршрутизатор. Когда вы щелкаете правой кнопкой мыши и открываете новую вкладку, браузер берет ссылку href.

Вам все еще нужно сделать доступным корневой маршрутизатор. В приведенном ниже примере кода предполагается, что у вас есть код внутри компонента Vue с поддержкой vue-router, который использует ag-grid, следовательно, $ router указывает на корневой маршрутизатор. 

{
    headerName: 'ID',
    field: 'id',
    cellRenderer: (params) => {
        const route = {
          name: "route-name",
          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;
    }
}
...