标签：Vue Kendo UI 组件 categories DropDownList
在本文中，您将通过构建一个包含 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。