參考文檔：快速上手 | Luckysheet文檔
一、引入
? 在vue項目的public文件夾下的index.html的<head>標簽里面引入
<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>二、頁面應(yīng)用
2.1、視圖中定義一個容器
<template>
<div>
<div @click="DateShow">Excel在線編輯</div>
<div
id="luckysheetContainer"
style="margin: 0px; padding: 0px; width: 60%; height: 80vh"
></div>
</div>
</template>2.2、初始化容器
mounted() {
let dataS;
dataS = [
[
{
ct: {
fa: "General",
t: "g",
},
m: "節(jié)次",
v: "節(jié)次",
id: "111",
},
{
ct: {
fa: "General",
t: "g",
},
m: " 開始時間",
v: " 開始時間",
},
{
ct: {
fa: "General",
t: "g",
},
m: " 結(jié)束時間",
v: " 結(jié)束時間",
},
{
ct: {
fa: "General",
t: "g",
},
m: "星期一",
v: "星期一",
},
{
ct: {
fa: "General",
t: "g",
},
m: "星期二",
v: "星期二",
},
{
ct: {
fa: "General",
t: "g",
},
m: "星期三",
v: "星期三",
},
{
ct: {
fa: "General",
t: "g",
},
m: "星期四",
v: "星期四",
},
],
[
{
ct: {
fa: "General",
t: "g",
},
m: "1",
v: "1",
},
{
ct: {
fa: "General",
t: "g",
},
m: "12:00",
v: "12:00",
},
{
ct: {
fa: "General",
t: "g",
},
m: "14:00",
v: "14:00",
},
],
[
{
ct: {
fa: "General",
t: "g",
},
m: "2",
v: "2",
},
{
ct: {
fa: "General",
t: "g",
},
m: "15:00",
v: "15:00",
},
{
ct: {
fa: "General",
t: "g",
},
m: "18:00",
v: "18:00",
},
],
];
// 獲取容器元素
// const container = document.getElementById("luckysheetContainer");
// console.log("container", container);
// 將數(shù)據(jù)渲染到LuckySheet表格
window.luckysheet.create({
container: "luckysheetContainer", // DOM容器的ID
title: "電子表格", // 工作簿名稱
lang: "zh", // 設(shè)定表格的語言
// showtoolbarConfig: {
// print: false, // 工具欄隱藏打印按鈕
// },
// showsheetbarConfig: {
// add: false, // 底部sheet頁隱藏新增sheet按鈕
// menu: false, // 底部sheet頁隱藏管理按鈕
// },
// sheetRightClickConfig: {
// hide: false, // 隱藏，取消隱藏
// move: false, // 向左移，向右移
// },
});
this.sheetfile = window.luckysheet.getluckysheetfile();
this.sheetfile[0].data = dataS;
console.log(dataS, "this.sheetfile", this.sheetfile);
},可以自行編輯數(shù)據(jù)，也可以將數(shù)據(jù)渲染上去進行展示與二次編輯
2.3、效果展示
文章來源：http://www.zghlxwxcb.cn/news/detail-812685.html
2.4、數(shù)據(jù)處理
DateShow() {
this.sheetfile = window.luckysheet.getluckysheetfile();
console.log("this.sheetfile", this.sheetfile);
const filteredArr = this.sheetfile[0].data.filter((row) =>
row.some((cell) => cell !== null)
);
const filteredArr2 = filteredArr.map((row) =>
row.filter((cell) => cell !== null)
);
console.log("value", filteredArr2);
},上面的“filteredArr2”可以拿到表格中不為null的數(shù)據(jù)，后續(xù)其他功能可以在文檔里查找。文章來源地址http://www.zghlxwxcb.cn/news/detail-812685.html
到了這里，關(guān)于Luckysheet類似excel的在線表格(vue)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
