Kendo-UI 编辑模板不适用于 Vue 模板单文件组件

Question

我正在使用 kendoui grid vue 包装器，我在 kendoui vue 文档中发现我可以将单个文件组件用于 kendo 模板，我正在使用弹出编辑器处理可编辑网格，我正在做的是设置属性"editable" 带有返回模板和模板参数的方法的名称，与 KendoUi 的 Vue Templates 的文档相同，但它只是忽略了该函数并获得内联可编辑。

我尝试的另一种方法是设置可编辑属性，如“{mode: 'popup', template: templateMethod}”，它会弹出编辑窗口，但在内容上它只显示“[object] [object ]"。

这是我的代码：

路由器组件：

<template>
  <c-main>
  <c-row>
	<c-col xs="24" sm="8">
		<c-panel title="Departamento<small>Workflow</small>" style="height:350px;">
			<div class="u-mt-10"><strong>Nombre</strong></div>
			<div class="u-mt-10">{{ $route.params.name }}</div>
			<div class="u-mt-10"><strong>Descripción</strong></div>
			<div class="u-mt-10">{{ $route.params.description }}</div>
		</c-panel>
	</c-col>
	<c-col xs="24" sm="16">
		<c-panel title="Usuarios<small>Administrar</small>" style="height:350px;">
				<kendo-datasource
					ref="usersdatasource"
					:type="'aspnetmvc-ajax'"
					:pageSize="20"
					:server-filtering='true'
					:transport-read-url= "baseServiceUrl+'/api/DepartmentUsers'"
					:transport-read-type="'GET'"
					:transport-read-data-type="'json'"
					:transport-read-data="dataParameters"
					:transport-destroy-url="baseServiceUrl+'/api/DepartmentUsers'"
					:transport-create-url="baseServiceUrl+'/api/DepartmentUsers'"
					:schema-data= "'Data'"
					:schema-total= "'Total'"
					:schema-errors= "'Errors'"
					:schema-model-id="'Id'"
					:schema-model-fields="usersSchemaModelFields"
			  ></kendo-datasource>
			  <kendo-grid
		  id="usersdatagrid"
		  :height="'auto'"
          :dataSourceRef="'usersdatasource'"
		  :toolbar="[ {name:'create', text: 'Agregar Usuario'}]"
          :groupable='false'
          :sortable='true'
		  :filterable='true'
		  :selectable='true'
		  :editable="{ mode: 'popup', template: popupTemplate }"
          :pageable-refresh='true'
          :pageable-page-sizes='true'
          :pageable-button-count="5"
		  >
        <kendo-grid-column
          field="UserName"
          title="Usuario"
		  >
        </kendo-grid-column>
		<kendo-grid-column
          field="DisplayName"
          title="Nombre"
		  >
        </kendo-grid-column>
        <kendo-grid-column 
		:width="150"
		:command="[{name:'destroy', text:'Eliminar' }]" title="Acción">
		</kendo-grid-column>
		
      </kendo-grid>
		</c-panel>
	</c-col>
  </c-row>
  <c-row>
	<c-col xs="24">
	<c-panel title="Reglas<small>Departamento</small>" style="height:400px;">
		<kendo-datasource
            ref="rulesdatasource"
            :type="'aspnetmvc-ajax'"
            :pageSize="20"
            :server-filtering='true'
            :transport-read-url= "baseServiceUrl+'/api/Departments'"
			:transport-read-type="'GET'"
			:transport-read-data-type="'json'"
			:transport-update-url="baseServiceUrl+'/api/Departments'"
			:transport-update-type="'PUT'"
			:transport-update-data-type="'json'"
			:transport-destroy-url="baseServiceUrl+'/api/Departments'"
			:transport-create-url="baseServiceUrl+'/api/Departments'"
			:schema-data= "'Data'"
			:schema-total= "'Total'"
			:schema-errors= "'Errors'"
			:schema-model-id="'Id'"
      ></kendo-datasource>
	  <kendo-grid
		  id="rulesdatagrid"
		  :height="'auto'"
          :dataSourceRef="'rulesdatasource'"
		  :groupable='false'
          :sortable='true'
		  :filterable='true'
		  :selectable='true'
          :pageable-refresh='true'
          :pageable-page-sizes='true'
          :pageable-button-count="5"
		  >
        <kendo-grid-column
          field="UserName"
          title="Usuario"
		  >
        </kendo-grid-column>
		<kendo-grid-column
          field="Nombre"
          title="DisplayName"
		  >
        </kendo-grid-column>
      </kendo-grid>
	  </c-panel>
	</c-col>
  </c-row>
  </c-main>
</template>
<script>
  import Vue from 'vue'
  import UserTemplateVue from './departmentUserTemplate.vue'
  var UserTemplate = Vue.component(UserTemplateVue.name, UserTemplateVue)

  export default {
  name: "AddUserDepartmentView",
  data() {
  return {
  baseServiceUrl: window.baseServiceUrl,
  dataParameters: {
	department: $route.params.Id,
	roles: "WORKFLOW;WORKFLOWADMIN"
  },
  filterConfiguration: [],
  usersSchemaModelFields: {
		Id: { editable: false, nullable: true },
		DisplayName: { validation: { required: true } },
		UserName: { validation: { required: true } },
		Email: { validation: { required: true } },
		TenantId: { validation: { required: true } },
		IsAdmin: { validation: { required: true } }
	}
  }
  },
  methods: {
  popupTemplate: function(e) {
	return {
		template: UserTemplate,
		templateArgs: e
	}
  }
  }

  };
</script>

<style>

#usersdatagrid{
	height:100% !important;
}

#rulesdatagrid{
	height:100% !important;
}

</style>

模板组件：

<template>
    <span>
        <button @click="buttonClick">Click Me</button>
    </span>
</template>

<script>
    export default {
        name: 'template1',
        methods: {
            buttonClick: function (e) {
                alert("Button click")
            }
    },
        data () {
        return {
            templateArgs: {}
            }
    }
    }
</script>

请帮帮我。

非常感谢

Answer 1

我知道这是旧的，但我在寻找相关的东西时偶然发现了这个，所以我想我会尝试一下以供将来参考。

我建议在这里尝试两件事：

1. 确保您的组件具有指定的名称。
2. 尝试使用：editable-mode="popup;" 和 editable-template="popupTemplate"

这对我有用。无论出于何种原因，当我将一个对象传递给可编辑对象时，它就是不高兴。

希望有帮助！