基于vue+canvas的excel-like組件實(shí)例詳解
a vue component，基于vue的表格組件，主要解決大數(shù)據(jù)量的表格渲染性能問(wèn)題，使用canvas繪制表格，同時(shí)支持類似excel的批量選中，復(fù)制黏貼刪除，實(shí)時(shí)編輯等功能。
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，通過(guò)canvas實(shí)現(xiàn)，能處理萬(wàn)級(jí)數(shù)據(jù)
2，類似excel，選中單元格并實(shí)時(shí)編輯
3，復(fù)制黏貼，支持批量，從excel復(fù)制，復(fù)制到excel都可以
4，撤銷／前進(jìn)
5，checkbox勾選框，全選功能，可開(kāi)關(guān)
6，固定列（目前只支持固定到右側(cè)）
7，刪除單元格，支持批量
7，支持文本的重新計(jì)算渲染（通過(guò)計(jì)算的單元格不支持實(shí)時(shí)編輯）
8，支持基礎(chǔ)按鈕顯示及點(diǎn)擊事件
9，隱藏列功能，可開(kāi)關(guān)
##TODO：
1，由于使用canvas不支持瀏覽器的檢索功能，以后加上表格的搜索功能
2，行列拖拽
3，基本公式計(jì)算
總結(jié)
以上所述是小編給大家介紹的基于vue+canvas的excel-like組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目如何解決數(shù)字計(jì)算精度問(wèn)題
這篇文章主要介紹了vue項(xiàng)目如何解決數(shù)字計(jì)算精度問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
淺談使用mpvue開(kāi)發(fā)小程序需要注意和了解的知識(shí)點(diǎn)
這篇文章主要介紹了淺談使用mpvue開(kāi)發(fā)小程序需要注意和了解的知識(shí)點(diǎn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個(gè)全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動(dòng)跟蹤變化并更新視圖的對(duì)象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下2024-08-08
vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
跨域，跨的是不同域，也就是協(xié)議或主機(jī)或或端口號(hào)不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
在vue項(xiàng)目中和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),它是基于promise的http庫(kù),可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05