UI组件库Kendo UI for Vue原生组件中文教程：入门指南（二）-控件新闻-慧都网

UI组件库Kendo UI for Vue原生组件中文教程：入门指南（二）

翻译|使用教程|编辑：龚雪|2022-06-01 10:53:06.890|阅读 96 次

概述：本文主要为大家介绍如何开始使用Kendo UI for Vue的原生组件开发，欢迎下载最新版控件体验！

5. 添加Kendo UI for Vue DropDownList

现在您已经完成所有设置并准备就绪，可以开始使用Kendo UI for Vue组件了，从DropDownList组件开始。在此之前需要使用以下代码将已经安装的 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 属性指向对象或原始值的数组，在这种情况下，您使用的是对象数组，因此需要同时指定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 旁边呈现了所选类别的 ID，为此您可以在数据选项中定义一个 dropdownlistCategory 字段并实现一个 onChange 处理程序来设置它。

现在您已经看到了Kendo UI for Vue组件的基本样子，在接下来的教程中我们将讲解使用 Kendo UI for Vue Data Grid实现更复杂的东西。

Kendo UI for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论