Kendo Vue Grid Wrapper用columns属性配置自定义列模板显示[object Object]如何解决

问题原因 #

通过kendo-grid的columns属性传列配置时，配置中的template字段会被Kendo Grid默认识别为原生字符串模板，仅支持传入字符串或返回HTML字符串的函数。你返回的Vue组件配置对象会被直接调用toString()转为[object Object]，因此渲染异常。而单独使用<kendo-grid-column>组件绑定:template时，组件内部会特殊处理返回的Vue组件配置，因此可以正常渲染。

修复步骤 #

1. 将列配置columns从data选项移到computed选项中，保证实例方法可以被正确引用，避免初始化时机导致的引用异常。
2. 把列配置中的template字段改为vueTemplate，显式告诉Kendo Grid这是Vue组件模板，需要走Vue组件渲染逻辑。
3. （可选）修改重名变量避免作用域混淆，降低后续维护风险。

修改后完整代码 #

<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'

// 修改变量名避免和方法重名
const ItemTemplateComponent = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
  components: {
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn
  },
  methods: {
    itemTemplate: function (e) {
      return {
        template: ItemTemplateComponent,
        templateArgs: e
      }
    }
  },
  // columns改到computed中定义
  computed: {
    columns() {
      return [{ 
        field: "name", 
        title: "Name", 
        // 用vueTemplate替代原生template字段
        vueTemplate: this.itemTemplate 
      }]
    }
  },
  data () {
    return {
      datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Alex Wade