vue項目Luckysheet的使用
什么是Luckysheet
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源。
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, // 默認工具欄都不顯示
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也支持對不同單元格進行設(shè)置。不好的一點是：我們一般都是需要將某一列或者某幾列單元格設(shè)置數(shù)據(jù)驗證，而Luckysheet只支持對單個或單個選區(qū)進行設(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-i18n 國際化,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
再做前端頁面的時候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue下拉框回顯并默認選中隨機問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3開發(fā)過程中,綁定的響應(yīng)式數(shù)據(jù)失去了響應(yīng)式,如何解決問題呢,下面這篇文章主要給大家介紹了關(guān)于vue3下會造成響應(yīng)式丟失的情況,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue3.3?+?TS4構(gòu)建實現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個自主打造媲美?ElementPlus?的組件庫2023-10-10
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數(shù)據(jù),并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個常用指令,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
Vue報錯:Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報錯:Injection?"xxxx"?not?found的解決辦法,文中通過圖文將解決的辦法介紹的非常詳細,對大家的學(xué)習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07