Question

我正在使用kendoui grid vue包装器，我在kendoui vue文档中发现我可以使用单个文件Component for kendo templates，我正在使用弹出编辑器编辑可编辑网格，我正在做的是设置属性＆＃34;可编辑的＆＃34;使用返回模板和模板args的方法的名称，与KendoUi的Vue模板的文档相同，但它只是忽略该函数并使内联可编辑。

我尝试的另一种方法是将可编辑属性设置为＆＃34; {mode：＆＃39; popup＆＃39;，template：templateMethod}＆＃34;，然后弹出编辑窗口，但是它只显示的内容＆＃34; [对象] [对象]＆＃34;。

这是我的代码：

RouterComponent：

＆＃13;

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

＆＃13;

模板组件：

＆＃13;

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

＆＃13;

请帮帮我。

非常感谢

Answer 1

我知道这是古老的，但是在寻找相关内容时偶然发现了这个，所以我想在此稍作尝试以供将来参考。

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

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

那对我有用。无论出于什么原因，当我将对象传递到可编辑状态时，它都不高兴。

希望有帮助！

Kendo-UI编辑模板不与Vue模板单个文件组件一起使用

1 个答案: