使用kendo-grid Column属性的自定义Kendo Vue网格包装器列模板

Question

我有以下模板，我想用它来呈现Kendo网格包装单元格的内容：

<template>
   <span>
      Template Rendered: {{ templateArgs.name }}
  </span>
</template>

<script>

export default {
  name: 'template1',
  data () {
    return {
      templateArgs: {}
    }
  }
}
</script>

我可以使用kendo-grid-column元素完成此操作，如下所示：

<template>
  <div>
    <kendo-grid :data-source="datasource">
          <kendo-grid-column field="name" title="Name" :template="itemTemplate"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

我想使用kendo-grid column属性，如下所示：

<template>
  <div>
    <kendo-grid :data-source="datasource" :columns="columns">
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        columns: [{ field: "name", title: "Name", template: this.itemTemplate }],
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

不过，第二种情况下的代码有问题。我使用object Object作为单元格内容，而不是使用模板呈现单元格。我应该怎么做才能解决这个问题？

Answer 1

Vue网格包装不支持在使用自定义呈现模板时使用columns属性。然而，使用原生网格也可以做类似的事情。

来源：https://www.telerik.com/forums/custom-kendo-grid-wrapper-column-template-using-kendo-grid-columns-attribute