kendo学习总结

最新推荐文章于 2025-06-24 09:11:47 发布

weixin_44596285

最新推荐文章于 2025-06-24 09:11:47 发布

阅读量994

点赞数 1

CC 4.0 BY-SA版权

分类专栏： kendo

本文链接：https://blog.youkuaiyun.com/weixin_44596285/article/details/87609216

kendo 专栏收录该内容

2 篇文章

订阅专栏

本文总结了Kendo UI for Vue的汉化方法，详细介绍了如何引入和配置汉化文件，以及如何添加组件。同时，针对遇到的Excel导出问题和解决办法进行了说明，包括引入jszip.js并确保在正确生命周期调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.汉化方法

页面引入两个文件
\js\messages\kendo.culture.zh-CN.min.js
//汉化对象为
DatePicker：日期采集器；
TimePicker：时间采集器
Calendar：日历；
NumericTextBox 等。
\js\messages\kendo.message.zh-CN.min.js
//汉化对象主要是除了dateinputs，其他包含英文字符的组件如grid
{“cancel”:“取消”，
“first”: “首页”,
“last”: “末页”,
“next”: “下一页”,
“previous”: “上一页”
}

引入文件后在Main.js中添加代码

<script>  
    kendo.culture("zh-CN");  
</script>

2.添加kendo UI for Vue

kendo UI for Vue将所有组件分类如下
https://www.telerik.com/kendo-vue-ui/components/
使用时根据项目情况，按需引入
如，使用kendo 的grid
在项目默认已经安装好
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
后
npm install --save @progress/kendo-grid-vue-wrapper

在main.js中引入依赖
import ‘@progress/kendo-ui’
注【：考虑项目大小和客户端加载速度，可不全部引入，只引入项目需要的js文件，如：import ‘@progress/kendo-ui/js/kendo.grid.js’】
import ‘@progress/kendo-theme-default/dist/all.css’
import { Grid, GridInstaller } from ‘@progress/kendo-grid-vue-wrapper’

遇到的问题以及解决方法

1.excel export失败，点击导出excel按钮没反应
提示 jszip not found

解决方案：kendo vue要使用导出excel、pdf功能，需要引用jszip.js

在main,js中引入jszip.js，依然提示jszip not found
【暂定解决方案】 index.html中引入

没有报错，能正常导出

kendo grid获取数据
当前页面数据:_data
remote远程获取的所有数据：dataSource._pristineData

ref属性添加在子组件上，可以用this. $r e f . n a m e 获取到组件实例，以此调用组件的属性或方法 t h i s .$ ref,name 需要在dom渲染完成后才调用，因此必须在生命周期mounted(包括)之后调用。

例子

    <kendo-grid  ref="grid"
                :data-source-ref="'datasource1'"
                :filterable-mode="'row'"
                :editable="'popup'"
                :pageable='true'
                :columns="cols"
                >


    </kendo-grid>


mounted:function(){
var grid = this.$ref.grid.kendoWidget()//grid为kendo-grid的实例
}