在本文中，您將通過構建一個包含 Grid、DropDownList、Window 和設計主題的小應用程序來學習如何使用Kendo UI for Vue組件。

Kendo UI最新官方正式版下載

5. 添加Kendo UI for Vue DropDownList

現(xiàn)在您已經(jīng)完成所有設置并準備就緒，可以開始使用Kendo UI for Vue組件了，從DropDownList組件開始。在此之前需要使用以下代碼將已經(jīng)安裝的 DropDownList 組件導入到 src/App.vue 文件和 appdata/categories.json 文件中：

import { DropDownList } from '@progress/kendo-vue-dropdowns';
import categories from './appdata/categories.json';

使用以下代碼添加 DropDownList 組件：

export default {
name: 'App',
components: {
'dropdownlist': DropDownList,
},
//..............

導入組件后，使用下面的代碼將 DropDownList 綁定到類別列表。

<dropdownlist
:data-items="categories"
:data-item-key="'CategoryID'"
:text-field="'CategoryName'"
>
</dropdownlist>

DropDownList 的 data-items 屬性指向?qū)ο蠡蛟贾档臄?shù)組，在這種情況下，您使用的是對象數(shù)組，因此需要同時指定data-item-key和text-field屬性。

您還可以使用 default-item 屬性在未選擇任何項目時向用戶顯示提示，默認項目應該有一個與文本字段名稱匹配的字段。

要顯示更多 DropDownList 的實際效果，請更新 src/App.vue 文件來使用以下代碼。

<template>
<div id="app">
<h1>Hello Kendo UI for Vue!</h1>
<p>
<dropdownlist
:data-items="categories"
:data-item-key="'CategoryID'"
:text-field="'CategoryName'"
:default-item="defaultItems"
@change="handleDropDownChange"
>
</dropdownlist>
&nbsp; Selected category ID: <strong>{{this.dropdownlistCategory}}</strong>
</p>
</div>
</template>

<script>
import categories from './appdata/categories.json';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import '@progress/kendo-theme-default/dist/all.css';

export default {
name: 'App',
components: {
'dropdownlist': DropDownList,
},
data: function() {
return {
categories: categories,
defaultItems: {CategoryID: null, CategoryName: "Product categories"},
dropdownlistCategory: null
}
},
methods: {
handleDropDownChange (e) {
this.dropdownlistCategory = e.target.value.CategoryID;
}
}
}
</script>

 上面的代碼還在 DropDownList 旁邊呈現(xiàn)了所選類別的 ID，為此您可以在數(shù)據(jù)選項中定義一個 dropdownlistCategory 字段并實現(xiàn)一個 onChange 處理程序來設置它。

現(xiàn)在您已經(jīng)看到了Kendo UI for Vue組件的基本樣子，在接下來的教程中我們將講解使用 Kendo UI for Vue Data Grid實現(xiàn)更復雜的東西。

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發(fā)人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

Telerik_KendoUI產(chǎn)品技術交流群：726377843    歡迎一起進群討論