vue項目Luckysheet的使用
什么是Luckysheet
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源。
Luckysheet官網：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
可以根據Luckysheet的官方文檔配置在線文檔，官方文檔提供了很多配置項，基本都能滿足一般的開發(fā)需求。配置如下：
const options = {
container: 'luckysheet', // luckysheet為容器id
lang: 'zh',
showinfobar: false, // 標題部分信息
showsheetbar: false, // 底部sheet頁
sheetFormulaBar: true, // 是否顯示公示欄
showstatisticBar: false, // 自定義計數欄
showtoolbar: false, // 默認工具欄都不顯示
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、初始化文檔標題行
一般在實際需求中，excle都是需要有標題行來告訴使用者每個單元格填寫什么內容，所以就需要在初始化luckysheet時配置好；luckysheet的options配置項里提供了一個celldata屬性可以指定單元格數據。其中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、配置數據驗證
在單元格上限制輸入內容或格式也是使用excle常見的，Luckysheet也支持對不同單元格進行設置。不好的一點是：我們一般都是需要將某一列或者某幾列單元格設置數據驗證，而Luckysheet只支持對單個或單個選區(qū)進行設置；
初始化時設置數據驗證
const options = {
data: {
dataVerification: {
'1_2': {
type: 'dropdown',
type2: null,
value1: '高,中,低',
prohibitInput: true
}
}
}
}
luckysheet生成后設置數據驗證
luckysheet.setDataVerification(
{
type: 'dropdown',
type2: null,
value1: '高,中,低',
prohibitInput: true
},
{
range: 'B1'
}
)
5、監(jiān)聽單元格
Luckysheet的鉤子函數cellUpdated可用于監(jiān)聽單元格的數據修改；
const options = {
hook: {
cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
// 執(zhí)行單元格修改后的操作
}
}
}
總結
最后附上實現效果圖：（效果圖稍后附上）
此上內容為開發(fā)后的筆記整理，僅作后期查看用。
到此這篇關于vue項目Luckysheet的使用的文章就介紹到這了,更多相關vue Luckysheet使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue實現電商網站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue 是一套用于構建用戶界面的漸進式框架，和React，都自稱自己只關注視圖層，全家桶對于開發(fā)一個完整的中大型單頁面應用項目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門基礎教程，感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了Vue打包路徑配置過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue axios全局攔截 get請求、post請求、配置請求的實例代碼
這篇文章主要介紹了Vue axios全局攔截 get請求、post請求、配置請求的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了開啟Vue項目缺少node_models包的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā))，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了vue實現彈窗翻頁多選效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue是當今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學習曲線,是開發(fā)人員最想學習的頂級前端庫之一,下面這篇文章主要給大家介紹了關于vue管理系統(tǒng)項目中的一些核心技能,需要的朋友可以參考下2022-05-05
Vue 如何使用props、emit實現自定義雙向綁定的實現
這篇文章主要介紹了Vue 如何使用props、emit實現自定義雙向綁定的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06