基于vue+canvas的excel-like組件實例詳解
a vue component，基于vue的表格組件，主要解決大數(shù)據(jù)量的表格渲染性能問題，使用canvas繪制表格，同時支持類似excel的批量選中，復(fù)制黏貼刪除，實時編輯等功能。
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實現(xiàn)，能處理萬級數(shù)據(jù)
2，類似excel，選中單元格并實時編輯
3，復(fù)制黏貼，支持批量，從excel復(fù)制，復(fù)制到excel都可以
4，撤銷／前進
5，checkbox勾選框，全選功能，可開關(guān)
6，固定列（目前只支持固定到右側(cè)）
7，刪除單元格，支持批量
7，支持文本的重新計算渲染（通過計算的單元格不支持實時編輯）
8，支持基礎(chǔ)按鈕顯示及點擊事件
9，隱藏列功能，可開關(guān)
##TODO：
1，由于使用canvas不支持瀏覽器的檢索功能，以后加上表格的搜索功能
2，行列拖拽
3，基本公式計算
總結(jié)
以上所述是小編給大家介紹的基于vue+canvas的excel-like組件實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
antd vue表格可編輯單元格以及求和實現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue組件props傳值,對象獲取不到的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue?eslint報錯:Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時總會報各種錯,下面這篇文章主要給大家介紹了關(guān)于vue?eslint報錯:Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue項目中使用rem,在入口文件添加內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了Vue的列表之渲染,排序,過濾，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節(jié)省性能，由于是一個抽象組件，所以在頁面渲染完畢后不會被渲染成一個DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04