从kendo-ui网格col模板中调用vue方法

Question

我试图从一个Kendo网格列模板中调用一个组件方法，但是我得到了一个引用错误。问题是，我有一些全局文本格式化功能，我想要共享作为一个混合体。是否有任何方式从一个grid模板中调用一个vue组件方法？

<template>
    <div>
        <kendo-datasource ref="emailAccountDS"
                    :transport-read-url="'api/EmailAccounts'"
                    :transport-read-data-type="'json'"
                    :transport-read-type="'get'"
                    :type="'aspnetmvc-ajax'"
                    :schema-data="'data'"
                    :schema-total="schemaTotal"
                    :schema-model-id="'id'"
                    :schema-model-fields="schemaModelFields"
                    :server-paging= "true"
                    :server-sorting="true"
                    :server-filtering="true"
                    :page-size="25"
                    >
        </kendo-datasource>
        <kendo-grid :data-source-ref="'emailAccountDS'"
                    :pageable-always-visible="false"
                    :pageable-refresh="true"
                    :selectable="'row'"
                    :sortable="true"
                    :filterable="true"
                    :auto-bind="true"
                    :editable="'popup'"
                    :toolbar="['create','edit']">
            <kendo-grid-column field="hostName" title="Host Name"></kendo-grid-column>
            <!-- ReferenceError: testMethod is not defined --> 
            <kendo-grid-column field="accountType" title="Account Type" template="# testMethod(accountType) #"></kendo-grid-column>
            <kendo-grid-column field="port" ></kendo-grid-column>
            <kendo-grid-column field="useSsl"></kendo-grid-column>
            <kendo-grid-column field="username"></kendo-grid-column>
        </kendo-grid>
    </div>
</template>
<script>
    export default {
        name: 'EmailAccounts',
        data: function () {
            return {
                schemaModelFields: {
                    id: { type: 'number', editable: false, nullable: true },
                    isEnabled: { type: 'boolean', defaultValue: true, validation: { required: true } },
                    hostName: { type: 'string', validation: { required: true } },
                    port: { type: 'number', defaultValue: 995, validation: { required: true } },
                    useSsl: { type: 'boolean', defaultValue: true, validation: { required: true } },
                    username: { type: 'string', validation: { required: true } }
                }
            }
        },
        methods: {
            testMethod(accountType) {//<=== ReferenceError: testMethod is not defined
                return "foo";
            },
            schemaTotal: function (response) {
                return response.total;
            }
        }
    };
</script>
<style>
</style>

我已经设置了一个显示同样错误的柱塞这里。

我找到了这线程，它说这应该从2018.1起就能工作了。这是我正在运行的kendo版本。

"dependencies": {
    "@progress/kendo-datasource-vue-wrapper": "^2018.2.516",
    "@progress/kendo-grid-vue-wrapper": "^2018.2.516",
    "@progress/kendo-layout-vue-wrapper": "^2018.2.516",
    "@progress/kendo-theme-default": "^2.53.1",
    "@progress/kendo-treeview-vue-wrapper": "^2018.2.516",
    "@progress/kendo-ui": "^2018.2.516",
    "axios": "^0.18.0",
    "element-ui": "^2.3.3",
    "jquery": "^2.2.4",
    "popper.js": "^1.13.0",
    "vue": "^2.5.11",
    "vue-awesome": "^2.3.5",
    "vue-router": "^3.0.1",
    "webpack-hot-middleware": "2.21.2"
},

Answer 1

问题是kendo模板(带有"#某某#")在kendo代码中“编译”，并且没有引用您的Vue应用程序。但是在jquery文档中，我发现您可以将函数传递给模板。正如我在kendo源代码模板函数中所看到的，总是应该返回null/未定义的值。因此，我在下面添加了一些更改，它的效果就像一种魅力：

1. Vue模板的更改(绑定模板到函数) <kendo-grid-column field="UnitsInStock" title="Units In Stock" :template="isInStock" :width="120"></kendo-grid-column>
2. Vue组件代码中的更改(稍微改变isInStock方法以期待当前数据项对象，就像文档中的那样，并使其始终返回值)： isInStock:函数(DataItem){ if(dataItem.UnitsInStock <0欧元!dataItem.UnitsInStock){返回“缺货”；}返回dataItem.UnitsInStock；}