提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:龚雪|2022-06-14 10:41:58.533|阅读 72 次
概述:本文继续为大家介绍如何开始使用Kendo UI for Vue的原生组件开发,欢迎下载最新版控件体验!
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
在本文中,您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件。
Kendo UI for Vue Data Grid提供了100+个即用型功能,涵盖从分页、排序、过滤、编辑和分组到行和列虚拟化以及 Excel 导出的所有内容。在本节中,您将尝试其中的几个功能,但让我们从一个简单的网格开始。
将 Grid 组件、process包和products.json文件导入到 src/App.vue 文件中。
import products from './appdata/products.json'; import { process } from '@progress/kendo-data-query'; import { Grid } from '@progress/kendo-vue-grid';
添加下面的代码来创建一个绑定到您产品列表的网格,将其添加到src/App.vue 文件内模板中包含 DropDownList 的 <p> 之后。
<grid :data-items="products" :columns="columns" ></grid>
使用以下代码定义 Grid 组件:
export default { name: 'App', components: { 'dropdownlist': DropDownList, 'grid': Grid, }, //..............
在数据选项中添加以下行:
data: function() { return { categories: categories, products: products, columns: [ { field: 'ProductName', title: 'Product Name'}, { field: 'UnitPrice', title: 'Price' }, { field: 'UnitsInStock', title: 'Units in Stock' }, { field: 'Discontinued'} ] //.............. } }
当你的浏览器刷新时,会看到第一个网格!很简单,但还不是很真实。
要填写此示例,让我们使用 Grid API 添加下面的功能列表。 通读特性,然后获取更新后的 App.vue 代码(如下),亲自尝试更新后的 Grid。
以下是我们如何实现上述功能:
data: function() { return { //.............. pageable: true, sortable: true, //.............. } }
data: function() { return { //.............. skip: 0, take: 10, sort: [ { field: "ProductName", dir: "asc" } ] //.............. } }
<template v-slot:discontinuedTemplate="{ props }"> <td colspan="1"> <input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" /> </td> </template>
通过为 Discontinued 单元格添加单元格属性来编辑列数据属性。
columns: [ { field: 'ProductName', title: 'Product Name'}, { field: 'UnitPrice', title: 'Price' }, { field: 'UnitsInStock', title: 'Units in Stock' }, { field: 'Discontinued', cell: 'discontinuedTemplate' } ]
<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> <grid :data-items="dataResult" :pageable="pageable" :sortable="sortable" :sort="sort" :skip="skip" :take="take" :columns="columns" @datastatechange="dataStateChange" :style="{ height: '400px' }" > <template v-slot:discontinuedTemplate="{ props }"> <td colspan="1"> <input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" /> </td> </template> </grid> </div> </template> <script> import categories from './appdata/categories.json'; import products from './appdata/products.json'; import { process } from '@progress/kendo-data-query'; import { Grid } from '@progress/kendo-vue-grid'; import { DropDownList } from '@progress/kendo-vue-dropdowns'; import '@progress/kendo-theme-default/dist/all.css'; export default { name: 'App', components: { 'dropdownlist': DropDownList, 'grid': Grid }, data: function() { return { categories: categories, products: products, defaultItems: {CategoryID: null, CategoryName: "Product categories"}, dropdownlistCategory: null, pageable: true, sortable: true, skip: 0, take: 10, sort: [ { field: "ProductName", dir: "asc" } ], filter: null, columns: [ { field: 'ProductName', title: 'Product Name'}, { field: 'UnitPrice', title: 'Price' }, { field: 'UnitsInStock', title: 'Units in Stock' }, { field: 'Discontinued', cell: 'discontinuedTemplate' } ], dataResult:[] } }, created() { const dataState = { skip: this.skip, take: this.take, sort: this.sort, }; this.dataResult = process(products, dataState); }, methods: { handleDropDownChange (e) { this.dropdownlistCategory = e.target.value.CategoryID; if (e.target.value.CategoryID !== null) { this.filter = { logic: 'and', filters: [{ field: 'CategoryID', operator: 'eq', value: e.target.value.CategoryID }] } this.skip = 0 } else { this.filter = [] this.skip = 0 } let event = {data:{ skip: this.skip, take: this.take, sort: this.sort, filter: this.filter }}; this.dataStateChange(event); }, createAppState: function(dataState) { this.take = dataState.take; this.skip = dataState.skip; this.sort = dataState.sort; }, dataStateChange (event) { this.createAppState(event.data); this.dataResult = process(products, { skip: this.skip, take: this.take, sort: this.sort, filter: this.filter }); } } } </script>
Kendo UI致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。
Telerik_KendoUI产品技术交流群:726377843 欢迎一起进群讨论
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都网本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢