Vue-Luckysheet的使用方法及遇到問題解決方法
更新時間：2022年08月08日 11:14:25 作者：Liuyanyun-15
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源，這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源。
配置文檔 · API · 教程：快速上手 | Luckysheet文檔
現(xiàn)將分享我在使用該組件過程中遇到的問題及解決方法。
第一步：定義Luckysheet組件：組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用，因此，先定義好可重復(fù)使用的Luckysheet組件。代碼如下：
<template>
<div class="hello">
<div id="luckysheet" class="luckysheet-content"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {};
},
mounted() {
// In some cases, you need to use $nextTick
// this.$nextTick(() => {
$(function () {
luckysheet.create({
container: "luckysheet", // 設(shè)定DOM容器的id
title: "Luckysheet Demo", // 設(shè)定表格名稱
lang: "zh", // 設(shè)定表格語言
plugins: ["chart"],
data: [
{
name: "", //工作表名稱
color: "#eee333", //工作表(工作表名稱底部邊框線)顏色
index: 0, //工作表索引(新增一個工作表時該值是一個隨機字符串)
status: 1, //激活狀態(tài)
order: 0, //工作表的下標
hide: 0, //是否隱藏
row: 36, //行數(shù)
column: 10, //列數(shù)
defaultRowHeight: 28, //自定義行高,單位px
defaultColWidth: 100, //自定義列寬,單位px
celldata: [], //初始化使用的單元格數(shù)據(jù),r代表行，c代表列，v代表該單元格的值，最后展示的是value1，value2
config: {
merge: {}, //合并單元格
rowlen: {}, //表格行高
columnlen: {}, //表格列寬
rowhidden: {}, //隱藏行
colhidden: {}, //隱藏列
borderInfo: {}, //邊框
authority: {}, //工作表保護
},
scrollLeft: 0, //左右滾動條位置
scrollTop: 0, //上下滾動條位置
luckysheet_select_save: [], //選中的區(qū)域
calcChain: [], //公式鏈
isPivotTable: false, //是否數(shù)據(jù)透視表
pivotTable: {}, //數(shù)據(jù)透視表設(shè)置
filter_select: {}, //篩選范圍
filter: null, //篩選配置
luckysheet_alternateformat_save: [], //交替顏色
luckysheet_alternateformat_save_modelCustom: [], //自定義交替顏色
luckysheet_conditionformat_save: {}, //條件格式
frozen: {}, //凍結(jié)行列配置
chart: [], //圖表配置
zoomRatio: 1, // 縮放比例
image: [], //圖片
showGridLines: 1, //是否顯示網(wǎng)格線
dataVerification: {}, //數(shù)據(jù)驗證配置
},
],
showtoolbar: false,
showtoolbarConfig: {
undoRedo: false, //撤銷重做，注意撤消重做是兩個按鈕，由這一個配置決定顯示還是隱藏
paintFormat: false, //格式刷
currencyFormat: false, //貨幣格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '減少小數(shù)位數(shù)'
numberIncrease: false, // '增加小數(shù)位數(shù)
moreFormats: false, // '更多格式'
font: false, // '字體'
fontSize: false, // '字號大小'
bold: false, // '粗體 (Ctrl+B)'
italic: false, // '斜體 (Ctrl+I)'
strikethrough: false, // '刪除線 (Alt+Shift+5)'
underline: false, // '下劃線 (Alt+Shift+6)'
textColor: false, // '文本顏色'
fillColor: false, // '單元格顏色'
border: false, // '邊框'
mergeCell: false, // '合并單元格'
horizontalAlignMode: false, // '水平對齊方式'
verticalAlignMode: false, // '垂直對齊方式'
textWrapMode: false, // '換行方式'
textRotateMode: false, // '文本旋轉(zhuǎn)方式'
image: false, // '插入圖片'
link: false, // '插入鏈接'
chart: false, // '圖表'（圖標隱藏，但是如果配置了chart插件，右擊仍然可以新建圖表）
postil: false, //'批注'
pivotTable: false, //'數(shù)據(jù)透視表'
function: false, // '公式'
frozenMode: false, // '凍結(jié)方式'
sortAndFilter: false, // '排序和篩選'
conditionalFormat: false, // '條件格式'
dataVerification: false, // '數(shù)據(jù)驗證'
splitColumn: false, // '分列'
screenshot: false, // '截圖'
findAndReplace: false, // '查找替換'
protection: false, // '工作表保護'
print: false, // '打印'
},
showsheetbar: false, //是否顯示底部sheet頁按鈕
showsheetbarConfig: {
add: false, //新增sheet
menu: false, //sheet管理菜單
sheet: false, //sheet頁顯示
},
showinfobar: false, //是否顯示頂部信息欄
showstatisticBar: false, //是否顯示底部計數(shù)欄
showstatisticBarConfig: {
count: false, // 計數(shù)欄
view: false, // 打印視圖
zoom: false, // 縮放
},
sheetFormulaBar: false, //是否顯示公式欄
allowCopy: false, //是否允許拷貝
enableAddRow: true, //允許添加行
});
});
// });
},
};
</script>
<style lang="css" scoped>
.luckysheet-content {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 500px;
left: 0px;
top: 40px;
bottom: 0px;
}
</style>頁面樣式效果是這樣子的，可實現(xiàn)復(fù)制粘貼，excel的單元格下拉等表格操作，重點在于創(chuàng)建luckysheet實例時對實例屬性的配置。
第二步：引用組件，在父組件中注冊并引用組件。先import 組件，再components 中注冊，最后在以標簽的形式引用組件。代碼如下：
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>第三步：父組件將接口返回的數(shù)據(jù)傳遞給子組件，子組件獲取數(shù)據(jù)渲染數(shù)據(jù)。代碼如下：
父組件中獲取數(shù)據(jù)并綁定參數(shù)傳值。
<template>
<div id="app">
<HelloWorld v-bind:sheetParams="sheetParams" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
sheetParams: {
excelHeader: ["姓名", "年齡", "性別"],
excelData: {
姓名: ["張三", "趙蘭", "李四"],
年齡: ["18", "17", "20"],
性別: ["男", "女", "男"],
},
},
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>子組件獲取父組件傳遞的數(shù)據(jù)，渲染數(shù)據(jù)。
<template>
<div class="hello">
<div id="luckysheet" class="luckysheet-content"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
sheetParams: {},
},
data() {
return {
luckysheetOption: {
container: "luckysheet", // 設(shè)定DOM容器的id
title: "Luckysheet Demo", // 設(shè)定表格名稱
lang: "zh", // 設(shè)定表格語言
plugins: ["chart"],
data: [
{
name: "", //工作表名稱
color: "#eee333", //工作表(工作表名稱底部邊框線)顏色
index: 0, //工作表索引(新增一個工作表時該值是一個隨機字符串)
status: 1, //激活狀態(tài)
order: 0, //工作表的下標
hide: 0, //是否隱藏
row: 36, //行數(shù)
column: 10, //列數(shù)
defaultRowHeight: 28, //自定義行高,單位px
defaultColWidth: 100, //自定義列寬,單位px
celldata: [], //初始化使用的單元格數(shù)據(jù),r代表行，c代表列，v代表該單元格的值，最后展示的是value1，value2
config: {
merge: {}, //合并單元格
rowlen: {}, //表格行高
columnlen: {}, //表格列寬
rowhidden: {}, //隱藏行
colhidden: {}, //隱藏列
borderInfo: {}, //邊框
authority: {}, //工作表保護
},
scrollLeft: 0, //左右滾動條位置
scrollTop: 0, //上下滾動條位置
luckysheet_select_save: [], //選中的區(qū)域
calcChain: [], //公式鏈
isPivotTable: false, //是否數(shù)據(jù)透視表
pivotTable: {}, //數(shù)據(jù)透視表設(shè)置
filter_select: {}, //篩選范圍
filter: null, //篩選配置
luckysheet_alternateformat_save: [], //交替顏色
luckysheet_alternateformat_save_modelCustom: [], //自定義交替顏色
luckysheet_conditionformat_save: {}, //條件格式
frozen: {}, //凍結(jié)行列配置
chart: [], //圖表配置
zoomRatio: 1, // 縮放比例
image: [], //圖片
showGridLines: 1, //是否顯示網(wǎng)格線
dataVerification: {}, //數(shù)據(jù)驗證配置
},
],
showtoolbar: false,
showtoolbarConfig: {
undoRedo: false, //撤銷重做，注意撤消重做是兩個按鈕，由這一個配置決定顯示還是隱藏
paintFormat: false, //格式刷
currencyFormat: false, //貨幣格式
percentageFormat: false, //百分比格式
numberDecrease: false, // '減少小數(shù)位數(shù)'
numberIncrease: false, // '增加小數(shù)位數(shù)
moreFormats: false, // '更多格式'
font: false, // '字體'
fontSize: false, // '字號大小'
bold: false, // '粗體 (Ctrl+B)'
italic: false, // '斜體 (Ctrl+I)'
strikethrough: false, // '刪除線 (Alt+Shift+5)'
underline: false, // '下劃線 (Alt+Shift+6)'
textColor: false, // '文本顏色'
fillColor: false, // '單元格顏色'
border: false, // '邊框'
mergeCell: false, // '合并單元格'
horizontalAlignMode: false, // '水平對齊方式'
verticalAlignMode: false, // '垂直對齊方式'
textWrapMode: false, // '換行方式'
textRotateMode: false, // '文本旋轉(zhuǎn)方式'
image: false, // '插入圖片'
link: false, // '插入鏈接'
chart: false, // '圖表'（圖標隱藏，但是如果配置了chart插件，右擊仍然可以新建圖表）
postil: false, //'批注'
pivotTable: false, //'數(shù)據(jù)透視表'
function: false, // '公式'
frozenMode: false, // '凍結(jié)方式'
sortAndFilter: false, // '排序和篩選'
conditionalFormat: false, // '條件格式'
dataVerification: false, // '數(shù)據(jù)驗證'
splitColumn: false, // '分列'
screenshot: false, // '截圖'
findAndReplace: false, // '查找替換'
protection: false, // '工作表保護'
print: false, // '打印'
},
showsheetbar: false, //是否顯示底部sheet頁按鈕
showsheetbarConfig: {
add: false, //新增sheet
menu: false, //sheet管理菜單
sheet: false, //sheet頁顯示
},
showinfobar: false, //是否顯示頂部信息欄
showstatisticBar: false, //是否顯示底部計數(shù)欄
showstatisticBarConfig: {
count: false, // 計數(shù)欄
view: false, // 打印視圖
zoom: false, // 縮放
},
sheetFormulaBar: false, //是否顯示公式欄
allowCopy: false, //是否允許拷貝
enableAddRow: true, //允許添加行
}
};
},
created() {},
mounted() {
this.initLuckysheet(this.sheetParams);
},
methods: {
initLuckysheet(data) {
var _this = this;//注意這里要重新指定下this對象。
// In some cases, you need to use $nextTick
// this.$nextTick(() => {
$(function () {
if (data.excelHeader.length != 0 && JSON.stringify(data.excelData) != "{}") {
_this.luckysheetOption.hook = {
workbookCreateAfter: function () {
_this.dataRendSheet(data.excelHeader, data.excelData);
},
};
}
luckysheet.create(_this.luckysheetOption);
});
// });
},
/**接口數(shù)據(jù)回顯 */
dataRendSheet(excelHeader, excelData) {
//回顯表格表頭，第一行
if (excelHeader.length > 0) {
excelHeader.forEach((item1, index1) => {
luckysheet.setCellValue(0, index1, item1);
//普通回顯數(shù)據(jù)
if (JSON.stringify(excelData) != "{}") {
excelData[item1].forEach((item2, index2) => {
var row = index2 + 1;
luckysheet.setCellValue(row, index1, item2);
});
}
});
}
},
},
};
</script>
<style lang="css" scoped>
.luckysheet-content {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 500px;
left: 0px;
top: 40px;
bottom: 0px;
}
</style>表格回顯數(shù)據(jù)如圖：
注意兩點，第一數(shù)據(jù)格式，就是對象數(shù)組的轉(zhuǎn)換，沒什么難度；第二用到了Luckysheet的鉤子函數(shù)，鉤子函數(shù)的用法是在配置對象加一個hook對象，并給hook對象添加一個workbookCreateAfter方法，在工作簿創(chuàng)建好之后就執(zhí)行這個函數(shù)的渲染數(shù)據(jù)的邏輯。
第四步：父組件獲取子組件修改后的數(shù)據(jù)。父組件的布局和樣式有調(diào)整，以對話框的形式來引用組件，點擊按鈕，獲取數(shù)據(jù)。代碼如下：
<template>
<div id="app">
<div>
<el-dialog
:title="luckysheetName"
:visible.sync="centerDialogVisible"
v-if="centerDialogVisible"
width="50%"
:fullscreen="fullscreen"
:lock-scroll="lockScroll"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
>
<div style="width: 100%; height: 500px; position: relative">
<!-- luckysheet 數(shù)據(jù)編輯組件引用 -->
<HelloWorld
ref="luckysheetRef"
v-on:getLuckySheetData="receive"
v-bind:sheetParams="sheetParams"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="handleToClose">取 消</el-button>
<el-button type="primary" @click="saveSheetData">確 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
centerDialogVisible: true,
closeOnClickModal: false,
closeOnPressEscape: false,
fullscreen: false,
lockScroll: false,
luckysheetName: "luckysheet數(shù)據(jù)編輯",
sheetParams: {
excelHeader: ["姓名", "年齡", "性別"],
excelData: {
姓名: ["張三", "趙蘭", "李四"],
年齡: ["18", "17", "20"],
性別: ["男", "女", "男"],
},
},
luckySheetData: {
excelHeader: [],
excelData: {},
},
};
},
methods: {
saveSheetData() {
var _this = this;
_this.$refs.luckysheetRef.getSheetData(); //調(diào)用子組件獲取sheet數(shù)據(jù)
console.log(JSON.stringify(_this.luckySheetData));
// document.getElementById("luckysheet-input-box").style.zIndex = "-1";
// document.getElementsByClassName("luckysheet-cell-input").innerHTML = "";
// _this.dialogFormVisible = false; //關(guān)閉對話框
},
//luckySheet數(shù)據(jù)接收
receive: function (sheetTitle, commonData) {
var _this = this;
_this.luckySheetData.excelHeader = sheetTitle;
_this.luckySheetData.excelData = commonData;
},
handleToClose() {
this.centerDialogVisible = false;
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>頁面效果如圖：
點擊確定按鈕，獲取的數(shù)據(jù)格式為：
{"excelHeader":["姓名","年齡","性別"],"excelData":[{"姓名":"張三","年齡":18,"性別":"男"},{"姓名":"趙蘭","年齡":17,"性別":"女"},{"姓名":"李四","年齡":20,"性別":"男"}]}
注意一：如果想每次打開對話框都重新加載數(shù)據(jù)和渲染畫布，則在對話框加上兩行代碼： :visible.sync="centerDialogVisible"；v-if="centerDialogVisible"
注意二：luckysheet文件的引用路徑一定要對，如圖：
好了，今天分享的關(guān)于Luckysheet組件在vue中使用的方法，就到這里了，希望能夠幫助到大家。
到此這篇關(guān)于Vue-Luckysheet的使用方法的文章就介紹到這了,更多相關(guān)Vue Luckysheet使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
由于公司要求在內(nèi)網(wǎng)開發(fā)項目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運行項目的詳細步驟,需要的朋友可以參考下2023-11-11
使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
樹形下拉框是一個帶有下列樹形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹形下拉框的使用小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-10-10
構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法
這篇文章主要介紹了vue項目中在使用vue-router切換頁面的時候滾動條自動滾動到頂部的實現(xiàn)方法，一般使用Window scrollTo() 方法實現(xiàn)，本文給大家簡單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11