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

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 columns 属性，如下所示：

<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 网格包装器不支持在使用自定义呈现模板时使用列属性。但是，可以使用本机网格完成类似的操作。

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

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

Custom Kendo Vue Grid Wrapper Column Template Using kendo-grid columns Attribute

kendo-ui

kendo-grid

vue.js

vuejs2