基于vue+canvas的excel-like组件

myshell 发布于2019-08-21 16:58 / 1719人阅读

摘要：，基于的表格组件，主要解决大数据量的表格渲染性能问题，使用绘制表格，同时支持类似的批量选中，复制黏贴删除，实时编辑等功能，目前还在不断努力完善中，希望大家支持下，你们的就是我的动力。有任何建议或帮助，可以邮件联系。

vue-grid-canvas

vue component，基于vue的表格组件，主要解决大数据量的表格渲染性能问题，使用canvas绘制表格，同时支持类似excel的批量选中，复制黏贴删除，实时编辑等功能，目前还在不断努力完善中，希望大家支持下，你们的star就是我的动力。有任何建议或帮助，可以邮件联系:zhaoyh294@163.com。

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:

公式（‘=’开头，只支持toolbar上输入框填写）：

Example:

=include(1-3,5)=>h*1.1 & include(4,6--)=>i*1.2

1，支持多个公式拼接（‘&’）

2，支持区域自定义选择（‘区域=>公式’）

3，区域选择支持include，exclude（include可以省略，exclude可简写‘!’）

4，区域选择括号内内容，‘-’为区间，‘,’为并集

5，选中单列区域自动显示批量编辑按钮，点击自动填写公式

Description

1，通过canvas实现，能处理万级数据

2，类似excel，选中单元格并实时编辑

3，复制黏贴，支持批量，从excel复制，复制到excel都可以

4，撤销／前进

5，checkbox勾选框，全选功能，可开关

6，固定列（目前只支持固定到右侧）

7，删除单元格，支持批量

7，支持文本的重新计算渲染（通过计算的单元格不支持实时编辑）

8，支持基础按钮显示及点击事件

9，隐藏列功能，可开关

10，基础公式计算

TODO：

1，由于使用canvas不支持浏览器的检索功能，以后加上表格的搜索功能

2，行列拖拽

3，基本公式计算（部分）

运行项目DEMO

npm install

npm run dev

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88961.html

基于 vue-upload-component 封装一个图片上传组件

摘要：预览因为项目是基于做的，本身就提供了的预览组件，使用起来也简单，如果业务需求需要放大缩小，这个组件就不满足了。需求分析业务要求，需要一个图片上传控件，需满足多图上传点击预览图片前端压缩支持初始化数据相关功能及资源分析基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到...

wangbjun 2019-08-23 12:22 评论0 收藏0
基于vue项目的知识总结

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会单独写文章详述，努力填坑前言用vue有一段时间了，从用vue-cli搭建项目、一步步配置axios、vuex、vue-router，到之后的研究canvas、动效这些，一直想写些东西记录一下、做个总结，刚好趁着...

tianlai 2019-08-29 14:07 评论0 收藏0
canvas菜鸟基于小程序实现图案在线定制功能

摘要：多个页签的显示，其实不难，有现成的组件，于是老夫写代码就是一把梭，撸起袖子就是干，噼里啪啦一顿写，写完一测，没有任何问题，实在是不要太简单，丢给产品预览复制浏览器地址到别的地方粘贴，不能正确回显内需要实现跳转，而且要能返回。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，...

darkerXi 2019-08-26 12:13 评论0 收藏0
Vue.js快速介绍-超级马里奥像素艺术

摘要：文件可以包含模板和样式块，因此组件的所有必需代码都可以存在于单个文件中。该方法将使用其颜色信息发布事件，画布组件将侦听该颜色信息。包含任意颜色的像素名称，是包含值的颜色字典对象。从中使用了来渲染。原文出处：Quick Introduction to Vue.js — Super Mario Pixel Art ::代码我已经归纳在github上：【vue2-pixel-art】:::...

hankkin 2019-08-20 19:09 评论0 收藏0