vue.js - Telerik 调度程序 - 为自定义编辑模板调用另一个组件

Question

我想将一个仅包含我的调度程序的自定义编辑模板（以创建新任务或编辑）的组件调用到我的调度程序的“可编辑”属性中。

我遵循了这个解决方案，但是当我双击调度程序时，编辑窗口只显示“[Object object]”

调度器代码

<kendo-scheduler id="scheduler"
  :data-source="localDataSource"
  :event-template="eventTemplate"
  :editable="{template:editTemplate}" //here
>

方法editTemplate()的代码

methods: {
 editTemplate: function(){
   return {
     template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
   } 
 }
}

包含自定义模板的组件的代码

<template>
  <div class="k-edit-form-container">
    <p> Titre <input type="text" /> </p>
    <p>
      <span >Start <input data-role="datetimepicker" name="start" /> </span>
      <span >End <input data-role="datetimepicker" name="end" /> </span>
    </p>
  </div>
</template>

<script>
  export default {
    name:"CustomEditTemplate",
  }
</script>

我认为问题来自方法 editTemplate 但我不明白为什么。

任何人都可以帮助我吗？

谢谢。

Answer 1

似乎您在官方解决方案中混合了两个选项。我选择了第二个选项并最终解决了问题。让我们来看看。

调度器代码

<kendo-scheduler id="scheduler"
  :data-source="localDataSource"
  :event-template="eventTemplate"
  :editable-template="customEditorTemplate"
>

customEditorTemplate() 方法的代码

methods: {
  customEditorTemplate: function(e) {
      var template = window.kendo.template(window.kendo.jQuery('#customEditorTemplate').html());
      return template(e);
  }
}

包含自定义模板的组件的代码

<template>
 <script id="customEditorTemplate" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <p> Titre <input type="text" /> </p>
    <p>
      <span >Start <input data-role="datetimepicker" name="start" /> </span>
      <span >End <input data-role="datetimepicker" name="end" /> </span>
    </p>
  </div>
 </script>
</template>