基於vue+canvas的excel-like元件

HarveyZhao發表於2017-11-27
VueCanvasExcel元件

vue-grid-canvas

a vue component，基於vue的表格元件，主要解決大資料量的表格渲染效能問題，使用canvas繪製表格，同時支援類似excel的批量選中，複製黏貼刪除，實時編輯等功能，目前還在不斷努力完善中，希望大家支援下，你們的star就是我的動力。有任何建議或幫助，可以郵件聯絡:zhaoyh294@163.com。

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>
複製程式碼

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

複製程式碼

相關文章