如何在Kendo Grid(Vuejs)中使用路由器链接

的确,你不能在剑道模板内使用路由器链接。但我想我会提供另一种方法来达到同样的效果。

您可以重定向到新页面 using the programmatic way 通过打电话 router.push({ path: /细节/${id} }) 。

将模板替换为 command 实现了一个click事件,并调用 route.push 从那里开始。

我已经更新了 your example on slackblitz 举个例子。

剑道网格与命令列

<kendo-grid ref="grid"
            :height="550"
            :data-source-ref="'datasource1'"
            :sortable="true">
    <kendo-grid-column :field="'ProductID'"
                       :title="'Product ID'"></kendo-grid-column>
    <kendo-grid-column :field="'ProductName'"
                       :title="'Product Name'"></kendo-grid-column>
    <kendo-grid-column :field="'Link'" :template="linkTemplate1"></kendo-grid-column>
    <kendo-grid-column :command="detailsLink"></kendo-grid-column>
</kendo-grid>

数据对象中的命令数组。

new Vue({
    el: '#vueapp',
    router,
    data () {
        return {
          linkTemplate1: "<a href='/detail/#:ProductID#' class='k-button'>Link</a>",
          detailsLink: [{ 
            name: "details",
            click: function(e) {
              // prevent page scroll position change
              e.preventDefault();
              var tr = $(e.target).closest("tr"); // get the current table row (tr)
              // get the data bound to the current table row
              var data = this.dataItem(tr);
              // redirect to new page
              router.push({ path: `/detail/${data.ProductID}` })
            },// template must include k-grid-[command name]
            template: "<a class='k-button k-grid-details'>TEST</a>"
          }]
        }
    }
})