前端web版Exceil之Kendo UI SpreadSheet使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

我来公司也快三个月了，接触spreadSheet也已经两个月了，对spreadSheet也略知一二，踩过各种坑，api也几乎都用过，如果读者遇到什么问题欢迎讨论

SpreadSheet API基本使用：

spreadSheet官网APi spreadSheet API分为三部分：Configuration、Methods、Events

Configuration可以配置单元格的属性，比如： columns，rows的使用：可以生成一个100行，3列的表格

<spreadsheet
ref="spreadsheet"
:row="100"
:columns="3"
</spreadsheet>

第二部分是：Methods Methods是当我们获取了某sheet之后进行操作：例如refresh，是用于刷新表

const spreadSheet = this.$refs.spreadSheet.kendoWidget()
spreadSheet.refresh()

第三部分是：Events Events是spreadSheet用于监听的事件，在spreadSheet标签中用@绑定一下事件就好，例如：render

<spreadsheet
ref="spreadsheet"
@render="onRender"
</spreadsheet>

SpreadSheet 初始化：

// 获取spreadSpread
const spreadSheet = this.$refs.spreadSheet.kendoWidget()
// 尺寸
spreadSheet.element.css('height', '100%')
spreadSheet.element.css('width', '100%')
spreadSheet.resize()

SpreadSheet 渲染数据：

// 获取spreadSpread
const spreadSheet = this.$refs.spreadSheet.kendoWidget()
// 渲染
const sheet = spreadSheet.sheetByName('XXX')
sheet.fromJSON({
frozenRows:2,
frozenColumns: 2,
mergedCells: [],
rows:[],
columns:[]
})

SpreadSheet 优化渲染，分批渲染数据：

sheet.batch(() => {
    [1, 2, 3].map(num => {
    sheet.range(position).formula(formula)
    })
}, {layout: true})

SpreadSheet 其他常用网站：

SpreadSheet案例网站：demos.telerik.com/kendo-ui/sp…

SpreadSheet问答网站：www.telerik.com/forums/kend…

SpreadSheet其他APi网站：docs.telerik.com/kendo-ui/ap…

SpreadSheet 转变语言：

首先在node_modules文件夹中找到spreadSheet，并在里面找到kendo.culture.zh-CN文件和kendo.messages.zh-CN文件，在main.js文件中导入两个文件并在kendo中注册：

import kendo from '@progress/kendo-ui'
import 'kendo.culture.zh-CN'
import 'kendo.messages.zh-CN'
kendo.cultrue('zh-CN')