时间戳

首页 > 解决方案 > 如何在剑道网格自定义编辑器中添加 vue 组件？

vue.js - 如何在剑道网格自定义编辑器中添加 vue 组件？

问题描述

我有一列剑道网格，例如：

<kendo-grid-column
    :field="'qrcode'"
    :title="'qrcode'"
    :width="200"
    :editor="qrcodeEditor"
></kendo-grid-column>

根据Setting Custom Editors，我可以将编辑器重写为textarea, checkbox, 或dropdown list, 像

textareaEditor: function(container, options) {
    $('<textarea data-bind="value: ' +
            options.field +
            '" cols="20" rows="4"></textarea>'
    ).appendTo(container);
},

我的问题是如果编辑器是一个 vue 组件，比如<qrcode-capture />怎么办？

标签： vue.jskendo-uieditor

解决方案

我找到了解决方案：

methods:{
    qrcodeEditor: function(container, options) {
        // An <input> element is required for binding data
        let input = $(`<input data-bind="value:${options.field}" class="k-textbox width-50"/>`);
        input.appendTo(container);

        // use Vue.extend to make a component constructor, and new a component
        let qrcodeCapture = new (Vue.extend(QrcodeCapture))();
        qrcodeCapture.$on("decode", decodedString => {
            input.val(decodedString).trigger("change");
            // Trigger "change" element to tell kendo that you have change the data
        });
        qrcodeCapture.$mount();
        container.append(qrcodeCapture.$el);
    },
}

推荐阅读