基于vue+canvas的excel-like组件实例详解


Posted in Javascript onNovember 28, 2017

a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能。

基于vue+canvas的excel-like组件实例详解 

vue-grid-canvas

Install

NPM / Yarn

Install the package:

npm install vue-canvas-grid --save
Then import it in your project

import Vue from 'vue'
import Grid from 'vue-canvas-grid'

Vue.component('grid', Grid)

Usage

Simply use it like so:

<grid :grid-data="data" :columns="columns" showCheckbox columnSet></grid>

Description

1,通过canvas实现,能处理万级数据
2,类似excel,选中单元格并实时编辑
3,复制黏贴,支持批量,从excel复制,复制到excel都可以
4,撤销/前进
5,checkbox勾选框,全选功能,可开关
6,固定列(目前只支持固定到右侧)
7,删除单元格,支持批量
7,支持文本的重新计算渲染(通过计算的单元格不支持实时编辑)
8,支持基础按钮显示及点击事件
9,隐藏列功能,可开关
##TODO:

1,由于使用canvas不支持浏览器的检索功能,以后加上表格的搜索功能
2,行列拖拽
3,基本公式计算

总结

以上所述是小编给大家介绍的基于vue+canvas的excel-like组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 #Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
You might like
PHP 柱状图实现代码
2009/12/04 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python实现哈希表
2014/02/07 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python连接DB2数据库
2016/08/27 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python检查ping终端的方法
2019/01/26 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
毕业生简单求职信
2013/11/19 职场文书
会计专业自荐信
2013/12/02 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
动物科学专业求职信
2014/07/27 职场文书
北京英语导游词
2015/02/12 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL