基于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)文章
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談使用mpvue開發(fā)小程序需要注意和了解的知識點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字數(shù)時顯示省略號
這篇文章主要介紹了vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字數(shù)時顯示省略號,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用vue + less 實現(xiàn)簡單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實現(xiàn)簡單換膚功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動跟蹤變化并更新視圖的對象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下2024-08-08
跨域，跨的是不同域，也就是協(xié)議或主機或或端口號不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細代碼親測有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue-meta實現(xiàn)router動態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設(shè)置meta標(biāo)簽,實現(xiàn)思路非常簡單內(nèi)容包括mata標(biāo)簽的特點和mata標(biāo)簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細講解需要的朋友可以參考下2022-11-11
在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue使用localStorage保存登錄信息 適用于移動端、PC端
這篇文章主要為大家詳細介紹了vue使用localStorage保存登錄信息 適用于移動端、PC端，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05