vue項目Luckysheet的使用
什么是Luckysheet
Luckysheet ,一款純前端類似excel的在線表格,功能強(qiáng)大、配置簡單、完全開源。
Luckysheet官網(wǎng):https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md
Luckysheet使用(vue項目)
1、引入
目前Luckysheet不支持使用npm安裝包,所以只能使用CDN引入依賴;在vue項目的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的官方文檔配置在線文檔,官方文檔提供了很多配置項,基本都能滿足一般的開發(fā)需求。配置如下:
const options = { container: 'luckysheet', // luckysheet為容器id lang: 'zh', showinfobar: false, // 標(biāo)題部分信息 showsheetbar: false, // 底部sheet頁 sheetFormulaBar: true, // 是否顯示公示欄 showstatisticBar: false, // 自定義計數(shù)欄 showtoolbar: false, // 默認(rèn)工具欄都不顯示 enableAddRow: false, // 底部添加行按鈕 showtoolbarConfig: { // 自定義配置工具欄 undoRedo: true, // 撤銷重做,注意撤消重做是兩個按鈕,由這一個配置決定顯示還是隱藏 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)建;這樣一個在線文檔就創(chuàng)建好了。
3、初始化文檔標(biāo)題行
一般在實際需求中,excle都是需要有標(biāo)題行來告訴使用者每個單元格填寫什么內(nèi)容,所以就需要在初始化luckysheet時配置好;luckysheet的options配置項里提供了一個celldata屬性可以指定單元格數(shù)據(jù)。其中r代表行號,c代表列號,m為原始值,v為顯示值。
data: [ { celldata: [ { r: 0, c: 0, v: { ct: { fa: 'General', t: 'g' }, m: '序號', v: '序號' } }, { r: 0, c: 1, v: { ct: { fa: 'General', t: 'g' }, m: '姓名', v: '姓名' } } ] } ]
4、配置數(shù)據(jù)驗證
在單元格上限制輸入內(nèi)容或格式也是使用excle常見的,Luckysheet也支持對不同單元格進(jìn)行設(shè)置。不好的一點是:我們一般都是需要將某一列或者某幾列單元格設(shè)置數(shù)據(jù)驗證,而Luckysheet只支持對單個或單個選區(qū)進(jìn)行設(shè)置;
初始化時設(shè)置數(shù)據(jù)驗證
const options = { data: { dataVerification: { '1_2': { type: 'dropdown', type2: null, value1: '高,中,低', prohibitInput: true } } } }
luckysheet生成后設(shè)置數(shù)據(jù)驗證
luckysheet.setDataVerification( { type: 'dropdown', type2: null, value1: '高,中,低', prohibitInput: true }, { range: 'B1' } )
5、監(jiān)聽單元格
Luckysheet的鉤子函數(shù)cellUpdated可用于監(jiān)聽單元格的數(shù)據(jù)修改;
const options = { hook: { cellUpdated: function (r, c, oldValue, newValue, isRefresh) { // 執(zhí)行單元格修改后的操作 } } }
總結(jié)
最后附上實現(xiàn)效果圖:(效果圖稍后附上)
此上內(nèi)容為開發(fā)后的筆記整理,僅作后期查看用。
到此這篇關(guān)于vue項目Luckysheet的使用的文章就介紹到這了,更多相關(guān)vue Luckysheet使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例
這篇文章主要為大家介紹了Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實用價值,需要的朋友可以參考下2017-09-09Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06