我只是在玩 kendo-ui-vue,但我遇到了一件简单的事情,但我不知道如何让它工作。
我只是从页面中获取示例并进行了一些修改,所以我将粘贴来自 Kendo 的代码。
<div id="vueapp" class="vue-app">
<kendo-datasource ref="datasource1"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
:transport-read-data-type="'jsonp'"
:transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
:transport-update-data-type="'jsonp'"
:transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
:transport-destroy-data-type="'jsonp'"
:transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
:transport-create-data-type="'jsonp'"
:transport-parameter-map="parameterMap"
:schema-model-id="'ProductID'"
:schema-model-fields="schemaModelFields"
:batch='true'
:page-size='20'>
</kendo-datasource>
<kendo-grid :height="600"
:data-source-ref="'datasource1'"
:pageable='true'
:editable="'inline'"
:toolbar="['create']">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
<kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>
<kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>
</kendo-grid>
我在该代码中更改的是工具栏属性。
:toolbar="[
{ text: 'Insert above', icon: 'insert-up', click: function(e){alert();} },
{ text: 'Insert between', icon: 'insert-middle', onclick: createRecord },
{ text: 'Insert below', icon: 'insert-down', 'v-on:click': createRecord }]
"
当然,这些选项都没有真正起作用。
有什么建议吗?
问候!