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

Kendo UI最新官方正式版下載

7. 添加一個Kendo UI for Vue窗口

products 數組包含一些未顯示在網格中的字段。 在本節中，您將使用Kendo UI for Vue Window在用戶選擇網格行時顯示這些附加產品詳細信息。

以下是所需的步驟，首先導入Window組件：

import { Window } from '@progress/kendo-vue-dialogs';

export default {
name: 'App',
components: {
//..............
'window': Window
},
//..............

接下來，定義新的 windowVisible 和 gridClickedRow 數據屬性。

data: function() {
return {
//..............
gridClickedRow:{},
windowVisible: false
}
}

接下來，將添加到 Grid。

<grid @rowclick="rowClick">
//..............
</grid>

之后，添加下面的rowClick函數，它將windowVisible標志設置為true，并將被點擊行的數據項分配給gridClickedRow屬性，您將使用數據項值來呈現 Window 的內容。

methods: {
//..............
rowClick (event){
this.windowVisible=true;
this.gridClickedRow=event.dataItem;
}
//..............
}

接下來，添加以下 Window 聲明。 （在模板中的 Grid 定義之后立即添加它。）請注意僅當 windowVisible 標志值為 true 時才會呈現 Window。

<window v-if="windowVisible" :title="'Product Details'" @close="closeWindow" :height="250">
<dl style="{textAlign:left}">
<dt>Product Name</dt>
<dd>{{gridClickedRow.ProductName}}</dd>
<dt>Product ID</dt>
<dd>{{gridClickedRow.ProductID}}</dd>
<dt>Quantity per Unit</dt>
<dd>{{gridClickedRow.QuantityPerUnit}}</dd>
</dl>
</window>

最后，添加以下 Window 關閉處理程序，當用戶關閉 Window 時，它將 windowVisible 標志設置為 false。

methods: {
//..............
closeWindow (){
this.windowVisible=false;
}
}

使用此代碼，嘗試點擊網格中的一行，您應該會看到一個帶有附加產品信息的自定義窗口。

再一次注意這個功能的實現是多么簡單，使用Kendo UI for Vue，您可以獲得一組易于插入的Vue 組件——在這種情況下，構建一個可定制的跨瀏覽器友好的窗口，這就是Kendo UI for Vue的強大之處。

8. 激活您的試用或商業許可證

Kendo UI for Vue是一個專業開發的庫，在商業許可下分發。 從版本 2.0.0 開始，使用 Kendo UI for Vue 庫中的任何 UI 組件都需要商業許可證密鑰或有效的試用許可證密鑰。請按照Kendo UI for Vue My License頁面上的說明激活您的許可證。

9. 完整的源代碼

Kendo UI for Vue Getting Started應用程序已完成！ 您可以從 kendo-vue-examples GitHub 存儲庫下載并運行完整的示例應用程序，或者直接在StackBlitz 中運行、派生和試驗應用程序。

• 如果您使用的是 Vue 2，中實現的同一項目的鏈接。

10. VSCode 擴展

為了幫助您更快地創建項目，我們引入了 。

Kendo UI for Vue | 下載試用

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

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論