基於vue+canvas的excel-like組件

vue-grid-canvas

1. 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:

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

公式（‘=’開頭，只支持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