UI组件库Kendo UI for Vue中文入门指南(二)
作者:互联网
在本文中,您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用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> 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致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。
Telerik_KendoUI产品技术交流群:726377843 欢迎一起进群讨论
了解最新Kendo UI最新资讯,请关注Telerik中文网!
标签:Vue,Kendo,UI,组件,categories,DropDownList 来源: https://www.cnblogs.com/AABBbaby/p/16336672.html