基于vue+canvas的excel-like組件

myshell 發布于2019-08-21 16:58 / 1724人閱讀

摘要：，基于的表格組件，主要解決大數據量的表格渲染性能問題，使用繪制表格，同時支持類似的批量選中，復制黏貼刪除，實時編輯等功能，目前還在不斷努力完善中，希望大家支持下，你們的就是我的動力。有任何建議或幫助，可以郵件聯系。

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輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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