vue項(xiàng)目Luckysheet的使用
什么是Luckysheet
Luckysheet ,一款純前端類似excel的在線表格,功能強(qiáng)大、配置簡(jiǎn)單、完全開(kāi)源。
Luckysheet官網(wǎng):https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md
Luckysheet使用(vue項(xiàng)目)
1、引入
目前Luckysheet不支持使用npm安裝包,所以只能使用CDN引入依賴;在vue項(xiàng)目的public/index.html文件里引入:
<link rel='stylesheet' /> <link rel='stylesheet' /> <link rel='stylesheet' /> <link rel='stylesheet' /> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
2、初始化Luckysheet
可以根據(jù)Luckysheet的官方文檔配置在線文檔,官方文檔提供了很多配置項(xiàng),基本都能滿足一般的開(kāi)發(fā)需求。配置如下:
const options = { container: 'luckysheet', // luckysheet為容器id lang: 'zh', showinfobar: false, // 標(biāo)題部分信息 showsheetbar: false, // 底部sheet頁(yè) sheetFormulaBar: true, // 是否顯示公示欄 showstatisticBar: false, // 自定義計(jì)數(shù)欄 showtoolbar: false, // 默認(rèn)工具欄都不顯示 enableAddRow: false, // 底部添加行按鈕 showtoolbarConfig: { // 自定義配置工具欄 undoRedo: true, // 撤銷重做,注意撤消重做是兩個(gè)按鈕,由這一個(gè)配置決定顯示還是隱藏 paintFormat: true, // 格式刷 mergeCell: true // '合并單元格' }, cellRightClickConfig: { // 自定義右鍵單元格 insertColumn: false, deleteColumn: false, hideRow: false, hideColumn: false, deleteCell: false, sort: false, filter: false, // 篩選選區(qū) chart: false, // 圖表生成 image: false, // 插入圖片 link: false, // 插入鏈接 data: false, matrix: false }, enableAddBackTop: false }
再使用luckysheet.create(options)
創(chuàng)建;這樣一個(gè)在線文檔就創(chuàng)建好了。
3、初始化文檔標(biāo)題行
一般在實(shí)際需求中,excle都是需要有標(biāo)題行來(lái)告訴使用者每個(gè)單元格填寫什么內(nèi)容,所以就需要在初始化luckysheet時(shí)配置好;luckysheet的options配置項(xiàng)里提供了一個(gè)celldata屬性可以指定單元格數(shù)據(jù)。其中r代表行號(hào),c代表列號(hào),m為原始值,v為顯示值。
data: [ { celldata: [ { r: 0, c: 0, v: { ct: { fa: 'General', t: 'g' }, m: '序號(hào)', v: '序號(hào)' } }, { r: 0, c: 1, v: { ct: { fa: 'General', t: 'g' }, m: '姓名', v: '姓名' } } ] } ]
4、配置數(shù)據(jù)驗(yàn)證
在單元格上限制輸入內(nèi)容或格式也是使用excle常見(jiàn)的,Luckysheet也支持對(duì)不同單元格進(jìn)行設(shè)置。不好的一點(diǎn)是:我們一般都是需要將某一列或者某幾列單元格設(shè)置數(shù)據(jù)驗(yàn)證,而Luckysheet只支持對(duì)單個(gè)或單個(gè)選區(qū)進(jìn)行設(shè)置;
初始化時(shí)設(shè)置數(shù)據(jù)驗(yàn)證
const options = { data: { dataVerification: { '1_2': { type: 'dropdown', type2: null, value1: '高,中,低', prohibitInput: true } } } }
luckysheet生成后設(shè)置數(shù)據(jù)驗(yàn)證
luckysheet.setDataVerification( { type: 'dropdown', type2: null, value1: '高,中,低', prohibitInput: true }, { range: 'B1' } )
5、監(jiān)聽(tīng)單元格
Luckysheet的鉤子函數(shù)cellUpdated可用于監(jiān)聽(tīng)單元格的數(shù)據(jù)修改;
const options = { hook: { cellUpdated: function (r, c, oldValue, newValue, isRefresh) { // 執(zhí)行單元格修改后的操作 } } }
總結(jié)
最后附上實(shí)現(xiàn)效果圖:(效果圖稍后附上)
此上內(nèi)容為開(kāi)發(fā)后的筆記整理,僅作后期查看用。
到此這篇關(guān)于vue項(xiàng)目Luckysheet的使用的文章就介紹到這了,更多相關(guān)vue Luckysheet使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決
這篇文章主要介紹了開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長(zhǎng)最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語(yǔ)法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開(kāi)發(fā)人員最想學(xué)習(xí)的頂級(jí)前端庫(kù)之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下2022-05-05Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06