在vue+canvas中有關excel-like元件如何使用

a vue component，基於vue的表格組件，主要解決大數據量的表格渲染性能問題，使用canvas繪製表格，同時支持類似excel的批量選中，複製粘貼刪除，實時編輯等功能.這篇文章主要介紹了基於vue canvas的excel-like元件,需要的朋友可以參考下

a vue component，基於vue的表格元件，主要解決大數據量的表格渲染效能問題，使用canvas繪製表格，同時支援類似excel的批次選中，複製貼上刪除，即時編輯等功能。

 

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-ssr如何實現服務端渲染

#在react-router中如何使用history控制路由（詳細教學）

利用jqprint如何實現列印頁面內容

#使用js實作微信喚起支付寶領紅包（詳細教學）

使用Gulp如何實作靜態網頁模組化具體怎麼做？

有關旺旺線上客服如何實作

#在JavaScript中如何實作多重繼承

如何實作webpack多入口檔案包裝設定

如何實現網頁滑鼠特效（詳細教學）

使用vue如何實作的購物商城

使用Vue jquery如何實作表格指定列的文字收縮

#在AngularJS中使用ui-route實作多層巢狀路由（詳細教學）

以上是在vue+canvas中有關excel-like元件如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！